Question

我正在使用ng-repeat将按钮应用于list-group-item，其中按钮在未选中时具有类btn-primary，在选择时具有减去glyphico和类btn-success以及ok glyphicon。我正在尝试使用ng-class有条件地应用这个，这很好，但是如何通过$ index选择来做它我不知道。我查看了使用三元和逻辑（＆amp;＆amp;＆amp;）运算符的示例，但似乎无法正确使用语法。为了澄清我点击一个按钮来改变它的图标和它的颜色。如您所见，我成功使用$ index选择一个组项并更改其颜色没问题。

这是一个插件

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

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

*****解决方案

我按照建议使用选定的ng-repeat项目修复此问题。由于html元素上的常规'class'类似于if / else中的'else'子句，我使用它来评估按钮的默认状态，btn-primary使用glyphicon-minus和ng-class来更改按ID点击状态。

工作人员 http://plnkr.co/edit/0j9BxFQdD2lIx7lgthDR?p=preview

Answer 1

基本上你需要在范围内创建一个方法，它将为你提供激活行的值。

<强>标记

$scope.setSelected = function(idx) {
    $scope.indx = idx;
}

$scope.isActivate =function(idx){
    return $scope.indx == idx
}

<强>代码

$index

Working Plunkr

尽管使用ng-repeat的{{1}}并不是一个好主意，但@JB Nizet已经给出了另一种方法的答案，这是实现它的最佳方式。

Answer 2

您正在使用单个范围变量来存储6个不同元素的状态。那不可能奏效。

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

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

这是你的plunkr的工作版本：http://plnkr.co/edit/GxI4AyeGBPTDKDFS8Zjf?p=preview

关键材料：

  $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();
  };

和

    <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>

通过$ index

2 个答案: