2

我正在使用 ng-repeat 将按钮应用于列表组项，其中该按钮在未选择时具有 btn-primary 类，在选择时具有减号 glyphico 和 btn-success 类以及 ok glyphicon。我正在尝试使用 ng-class 有条件地应用它，这很好，但我不知道如何通过 $index 选择来做到这一点。我查看了使用三元和逻辑 ( && ) 运算符的示例，但似乎无法正确使用语法。为了澄清，我想要一个按钮，点击它来更改它的图标和颜色。如您所见，我成功地使用 $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点击状​​态。

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

4

3 回答 3

2

忘记使用索引并将活动传递id给函数：

ng-click="setSelected(id)"

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

$scope.selected是一个对象，因此它将被创建的子作用域继承，ng-repeat而原语不会

然后你可以id比较ng-repeatselected.id

ng-class="{'list-group-item-info': selected.id == id}"
于 2015-09-10T21:21:51.810 回答
0

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

标记

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

代码

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

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

工作Plunkr

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

于 2015-09-10T21:13:27.063 回答
0

您正在使用单个范围变量来存储 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>
于 2015-09-10T21:14:05.510 回答