ng-repeat与*条件* ng类的$index。

I'm applying a button to a list-group-item using ng-repeat where the button has a class btn-primary when not selected and a minus glyphico and a class btn-success when selected and an ok glyphicon. I'm trying to apply this conditionally using ng-class which is fine, but how to do it by $index selection I don't know. I've looked at examples using the ternary and logic ( && ) operators but can't seem to get the syntax right. To clarify I'd like one button when clicked to change it's icon and it's colour. As you can see I am successfully using the $index to select a group-item and change its colour no problem.

我使用ng-repeat对列表组项应用一个按钮，其中按钮在未选中时具有一个btn-primary类，在选中时具有一个负号和一个btn-success类以及一个ok glyphicon。我试着用ng-class有条件地应用这个，这没问题，但是我不知道怎么用$index选择。我已经看过使用三元和逻辑(&)运算符的例子，但似乎不能正确地理解语法。为了澄清我想要一个按钮当点击改变它的图标和它的颜色。您可以看到，我成功地使用$index选择了一个组项，并更改了它的颜色。

Here's a plunk

这是一个一美元

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>

***** Solution

* * * * *解决方案

I fixed this using the selected ng-repeat item as suggested. Since the regular 'class' on an html element sort of acts like the 'else' clause in an if/else I used that to evaluate the default state of the button, btn-primary with glyphicon-minus and ng-class to change the state on click by id.

我按照建议使用所选的ng-repeat项进行了修复。由于html元素上的常规'类'类似于if/else中的'else'子句，所以我使用它来评估按钮的默认状态，btn-primary与glyphicon- -和ng-class来改变点击id的状态。

Working plunker http://plnkr.co/edit/0j9BxFQdD2lIx7lgthDR?p=preview

工作恰好http://plnkr.co/edit/0j9BxFQdD2lIx7lgthDR?p=preview

3 个解决方案

#1

Forget using index and pass the active id to function :

忘记使用索引，将活动id传递给函数:

ng-click="setSelected(id)"

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

$scope.selected is an object so that it will get inherited by the child scopes created in ng-repeat whereas a primitive won't

美元的范围。所选的对象是一个对象，因此它将被在ng-repeat中创建的子范围继承，而原语则不会。

Then you can compare the id of ng-repeat to selected.id

然后您可以比较ng-repeat的id和selec.id。

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

#2

Basically you need to create a method in scope which will give you the value of activated row.

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

Markup

标记

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

Code

代码

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

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

Working Plunkr

工作Plunkr

Though playing with $index of ng-repeat is not an good idea to do, @JB Nizet already given answer for the other way which would be best way to implement it.

虽然使用ng-repeat的$index不是一个好主意，但是@JB Nizet已经给出了另一种实现它的最佳方式的答案。

#3

You're using a single scope variable to store the state of 6 different elements. That can't possibly work.

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

Forget about using the index. That's a bad idea. For example, as soon as you use an orderBy or filter filter, the index of a given element of the array will change. Same if you implement the remove() function; a given element will have its index modified, but you still want its state to be unchanged.

忘记使用索引。这是一个糟糕的主意。例如，只要使用orderBy或filter，数组中给定元素的索引就会改变。如果实现了remove()函数，则相同;给定的元素将修改它的索引，但是您仍然希望它的状态不变。

Instead, iterate over objects, and store the state of the object as an attribute of the object. When you click on a button, you change the state of the current object. As simple as that.

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

Here's a working version of your plunkr: http://plnkr.co/edit/GxI4AyeGBPTDKDFS8Zjf?p=preview

这里有一个工作版本:http://plnkr.co/edit/gxi4ayegbptdkdkdfs8zjfk p=preview

Key stuff:

主要内容:

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

and

和

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

#1