angularjs - Angular.js如何在单击时更改元素css类并删除所有其他元素

Question

我正在尝试使我的两个元素切换，因此如果单击一个元素，它将删除我的类的所有引用并将其应用于其自身。有任何想法吗？

<span id="1" ng-style="my-class" ng-click="tog=my-class"></span>

<span id="2" ng-style="my-class" ng-click="tog=my-class"></span>

干杯!

Answer 1

创建一个名为 selectedIndex 的范围属性和一个 itemClicked 函数：

function MyController ($scope) {
  $scope.collection = ["Item 1", "Item 2"];

  $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection

  $scope.itemClicked = function ($index) {
    $scope.selectedIndex = $index;
  };
}

然后我的模板看起来像这样：

<div>
      <span ng-repeat="item in collection"
             ng-class="{ 'selected-class-name': $index == selectedIndex }"
             ng-click="itemClicked($index)"> {{ item }} </span>
</div>

仅供参考 $index 是 ng-repeat 指令中可用的魔术变量。

您也可以在指令和模板中使用相同的示例。

这是一个有效的plnkr：

http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview

Answer 2

您是否尝试过像这里这样的 ng-class 条件：http: //jsfiddle.net/DotDotDot/zvLvg/？

    <span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
    <span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>

Answer 3

对我来说，最好的解决方案似乎是使用指令；控制器不需要知道视图正在更新。

Javascript：

var app = angular.module('app', ['directives']);

angular.module('directives', []).directive('toggleClass', function () {
    var directiveDefinitionObject = {
        restrict: 'A',
        template: '<span ng-click="localFunction()" ng-class="selected"  ng-transclude></span>',
        replace: true,
        scope: {
            model: '='
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.localFunction = function () {
                scope.model.value = scope.$id;
            };
            scope.$watch('model.value', function () {
                // Is this set to my scope?
                if (scope.model.value === scope.$id) {
                    scope.selected = "active";
                } else {
                    // nope
                    scope.selected = '';
                }
            });
        }
    };
    return directiveDefinitionObject;
});

HTML：

<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span>

<br/>
<br/>
<span toggle-class model="model">span1</span>

<br/><span toggle-class model="model">span2</span>

<br/><span toggle-class model="model">span3</span>

CSS：

.active {
     color:red;
 }

我有一个演示的小提琴。这个想法是，当单击指令时，会在指令上调用一个函数，将变量设置为当前范围 ID。然后每个指令也监视相同的值。如果范围 ID 匹配，则使用 ng-class 将当前元素设置为活动的。

使用指令的原因是您不再依赖于控制器。事实上，我根本没有控制器（我确实在名为“模型”的视图中定义了一个变量）。然后，您可以在项目的任何地方重用此指令，而不仅仅是在一个控制器上。

Answer 4

通常使用 Angular，您将使用 ngRepeat 指令输出这些跨度，并且（就像您的情况一样）每个项目都有一个 id。我知道这并非适用于所有情况，但如果从后端请求数据则很典型——数组中的对象往往具有唯一标识符。

您可以使用此 id 来促进在列表中的项目上切换类（请参阅下面的 plunkr 或代码）。

当 $index（在其他答案中描述）由于 Angular 中的排序而混乱时，使用对象 id 还可以消除不良影响。

示例 Plunkr：http ://plnkr.co/edit/na0gUec6cdMABK9L6drV

（如果 person.id 等于 $scope.activeClass 基本上应用 .active-selection 类 - 我们在用户单击项目时设置。

希望这对某人有所帮助，我发现 ng-class 中的表达式非常有用！

HTML

<ul>
  <li ng-repeat="person in people" 
  data-ng-class="{'active-selection': person.id == activeClass}">
    <a data-ng-click="selectPerson(person.id)">
      {{person.name}}
    </a>
  </li>
</ul>

JS

app.controller('MainCtrl', function($scope) {
  $scope.people = [{
    id: "1",
    name: "John",
  }, {
    id: "2",
    name: "Lucy"
  }, {
    id: "3",
    name: "Mark"
  }, {
    id: "4",
    name: "Sam"
  }];

  $scope.selectPerson = function(id) {
    $scope.activeClass = id;
    console.log(id);
  };
});    

CSS：

.active-selection {
  background-color: #eee;
}

Answer 5

我只更改/删除类：

   function removeClass() {
                    var element = angular.element('#nameInput');
          element.removeClass('nameClass');
   };

Answer 6

HTML

<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span>