使用NG-CLICK可以更改单击的元素上的类

Use NG-CLICK to change class on a clicked element

本文关键字：元素 单击 NG-CLICK 使用      更新时间：2023-09-26

我正在使用通过WordPress REST-API加载的ajax数据创建动态选项卡。一切都正常，但我需要在活动选项卡中添加一个类，以便在其上使用CSS转换

如果有任何建议，我将不胜感激。当单击一个元素会影响另一个元素时，我知道如何使用ng类，但当它影响被单击的元素时，就不知道了。同样值得注意的是，我为ng控制器使用了"as"语法。

JAVASCRIPT:
  var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
  $scope.myData = {
    tab: 0
  }; //set default tab
  $http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
    $scope.myData.data = response.data;
  });
});
homeApp.filter('toTrusted', ['$sce',
  function($sce) {
    return function(text) {
      return $sce.trustAsHtml(text);
    };
  }
]);
HTML:
<div class="more_comics_mobile"><a href="javascript:void(0)">More Comics <img src="./images/white-arrow.png" /></a>
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
  <div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
    {{ item.content }}
  </div>
  <div class="char_tabs">
    <nav>
      <ul ng-init="myData.tab = 0" ng-model='clicked'>
        <li class="tab" ng-repeat="item in myData.data">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <h3>{{ item.title }}</h3>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

我正在尝试将类添加到li元素中。我感谢任何帮助！

您可以像一样使用ng-class

<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>

有关更多选项，您可以访问https://docs.angularjs.org/api/ng/directive/ngClass

<div class="more_comics_mobile"><a href="javascript:void(0)">More Comics <img src="./images/white-arrow.png" /></a>
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
  <div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
    {{ item.content }}
  </div>
  <div class="char_tabs">
    <nav>
      <ul ng-init="myData.tab = 0" ng-model='clicked'>
        <li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <h3>{{ item.title }}</h3>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

在您的js 中

$scope.activate = function(index){
       document.getElementsByClassName.setAttribute("class","tab");
       document.getElementsByClassName[index].setAttribute("class","tab active");
}
相关文章：