Angularjs 通过$index使用*条件*ng类重复ng

我正在使用ng repeat将一个按钮应用于列表组项，其中该按钮在未选中时有一个类btn primary，在选中时有一个负glyphico和一个类btn success，以及一个ok glyphico图标。我正在尝试使用ng类有条件地应用它，这很好，但是如何通过$index选择来实现我不知道。我已经看过使用三元运算符和逻辑（&&&）运算符的示例，但似乎没有正确的语法。为了澄清，我想点击一个按钮来改变它的图标和颜色。正如您所看到的，我成功地使用$index选择了一个组项目并更改了它的颜色，没有问题

这是一个砰的一声

*****解决方案

我使用建议的所选ng repeat项修复了此问题。由于html元素排序中的常规“class”的行为类似于if/else中的“else”子句，我使用它来评估按钮的默认状态，因此使用glyphicon减号的btn primary和ng类在单击id时更改状态

工作打捞器

---

基本上，您需要在范围中创建一个方法，该方法将为您提供激活行的值

标记

<button class="btn btn-sm pull-right move-button" ng-class="{'btn-success': isActivate($index), 'btn-primary': !isActivate($index)}" ng-click="markActive($event, this.$index)">
   <span ng-class="{'glyphicon glyphicon-ok': isActivate($index), 'glyphicon glyphicon-minus': !isActivate($index)}"></span>
</button>

尽管玩

ng repeat

的

$index

不是一个好主意，但@JB Nizet已经给出了另一种实现它的最佳方法的答案

---

您使用一个范围变量来存储6个不同元素的状态。那不可能

忘记使用索引吧。那是个坏主意。例如，只要使用orderBy或filter筛选器，数组中给定元素的索引就会更改。如果实现remove（）函数，则相同；给定元素的索引将被修改，但您仍然希望其状态保持不变

相反，迭代对象，并将对象的状态存储为对象的属性。单击按钮时，将更改当前对象的状态。就这么简单

以下是您的plunkr的工作版本：

关键材料：

  $scope.objectsFromServer = [{
    id: 1
  }, 
  {
    id: 2
  }, 
  {
    id: 3
  }, 
  {
    id: 4
  }, 
  {
    id: 5
  }, 
  {
    id: 6
  }];

  $scope.setSelected = function(object) {
    $scope.selectedObject = object
  }

  $scope.markActive = function(object, $event) {
    object.active = !object.active;
    $event.stopPropagation();
    $event.preventDefault();
  };

及

{{object.id}

忘记使用索引，并将活动的

id

传递给函数：

ng-click="setSelected(id)"

$scope.selected ={ id: null}
$scope.setSelected = function(id) {
   $scope.selected.id = id;    
}

$scope.selected

是一个对象，因此它将被在

ng repeat

中创建的子作用域继承，而原语不会继承

然后您可以将

ng repeat

的

id

与所选的

进行比较。id

ng-class="{'list-group-item-info': selected.id == id}"

    <li ng-repeat="object in objectsFromServer " ng-click="setSelected(object)" class="list-group-item" ng-class="{'list-group-item-info': object == selectedObject}">{{ object.id }}

      <button disabled="" class="btn btn-sm btn-danger pull-right move-button" ng-click="remove()">
        <span class="glyphicon glyphicon-remove"></span>
      </button>

      <button class="btn btn-sm pull-right move-button" ng-class="{'btn-success': object.active, 'btn-primary': !object.active}" ng-click="markActive(object, $event)">
        <span ng-class="{'glyphicon glyphicon-ok': object.active, 'glyphicon glyphicon-minus': !object.active}"></span>
      </button>

    </li>

ng-click="setSelected(id)"

$scope.selected ={ id: null}
$scope.setSelected = function(id) {
   $scope.selected.id = id;    
}

ng-class="{'list-group-item-info': selected.id == id}"