Question

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

在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

您可以为指令指定控制器并将指令的作用域传递给控制器。通过访问作用域，您可以存储可在模板中使用的值，以有条件地添加类（使用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

Answer 2

在你的html代码中将id属性添加到按钮，就像我在下面的代码中所做的那样

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

    $scope.click = function(event) {

       var id = event.target.id;
       var btn = document.getElementById(id);
  if(btn.classList.contains('btn-default')){
            btn.classList.remove('btn-default');
      }
  btn.classList.add('btn-primary');
    angular.forEach(setting, function(value, key) {
         var button = document.getElementById('value.name');
        if(button.classList.contains('btn-primary')){
                button.classList.remove('btn-primary');
           }
           button.classList.add('btn-default');
        }); 

     }

Angularjs操纵每个ng-repeat元素

2 个答案: