javascript - Angularjs 操作每个 ng-repeat 元素

Question

我有一个自定义指令，它充当一个小部件，其中包含基于设置中传递的参数的按钮列表。

ng-repeat 中传递的设置

$scope.btnGroup = [{"name":"toggle 1"},{"name":"toggle 2"}];

HTML

<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
<div ng-repeat="btn in setting" style="display:inline">
    <button class="btn btn-default" ng-bind="btn.name" ng-click="click()"></button>
</div>

所以现在，我的情况是，当我单击其中一个按钮时，它会将单击的按钮设置为 btn-primary 类，将其他按钮设置为 btn-default 类反之亦然。

Controller

 var app = angular.module('toggleButtonMod', [])
 app.directive('toggleButton', function() {
 return {
     restrict: 'E',
     scope: {
         setting: '='
     },
     templateUrl: "app/Shared/togglebutton/toggleButtonView.html"
 }
})
app.controller("toggleButtonController", function($scope) {
 $scope.init = function() {
     $scope.setupContent();
 }
 $scope.setupContent = function() {

 }
 $scope.click = function(event) {
  console.log(event);
  //here to change all the buttons in ng-repeat to btn-default class and the 
  //clicked button btn-primary class
 }
})

我被困在了这里的点击功能上。我不知道如何操作ng-repeat中的每个按钮并相应地修改它们的css class。

Answer 1

您可以为指令提供一个 Controller ，并将指令的范围传递给 Controller ​​。通过访问范围，您可以存储一个可在模板中使用的值，以有条件地添加类(使用 ngClass)。

指令:

.directive('toggleButton', function() {
 return {
     restrict: 'E',
     scope: {
         setting: '='
     },
     templateUrl: "app/Shared/togglebutton/toggleButtonView.html", 
     controller: function($scope){
       $scope.toggleButton = {selected: null};
     }
 }
})

模板:

<div ng-repeat="btn in setting" style="display:inline">
    <button class="btn" ng-class="{'btn-primary': btn === toggleButton.selected, 'btn-default': btn !== toggleButton.selected}" ng-bind="btn.name" ng-click="toggleButtonSelection(btn)"></button>
</div>

注意:由于 ngRepeat 为集合中的每个项目创建一个新的作用域，因此在这种情况下，该值必须存储为对象属性，以便它不会隐藏在项目的作用域中，并且始终引用指令的作用域。

https://plnkr.co/edit/3xTpOFgpfYA99iKOi0rB?p=preview