关于 javascript:Angular Bootstrap 中的活动按钮状态


Active button states in Angular + Bootstrap

似乎是一个简单的问题，但我实际上遇到了麻烦。

戳这里

基本上我有一个 ng-repeat 按钮，然后单击按钮后会显示一个文本块。但是，当我单击一个按钮时，我想从所有其他按钮中隐藏文本块并从其他按钮中删除活动状态。基本上一次只能显示 1 个按钮文本块。

看起来很简单，但是 ng-hide 处理作用域的方式(作用域：true)意味着我不能真正查看其他作用域并关闭它们中的每一个。另一件事是，如果可能的话，我不想从 ng-repeat 更改实际数组。这是来自我必须发回的 API 的数据，如果可以的话，我试图不改变实际的数据结构。

1
2
3
4
        <button ng-click="showInfo = !showInfo" class="btn btn-primary">{{button.name}}</button>
   
   
        {{button.extraInfo}}

和JS

1
2
3
4
5
6
7
app.controller('MainCtrl', function($scope) {
  $scope.buttons = [
    { name: 'One', extraInfo: 'Extra info for button 1' },
    { name: 'Two', extraInfo: 'Extra info for button 2' },
    { name: 'Three', extraInfo: 'Extra info for button 3' }
  ];
});

我建议创建一个与 buttons 数组长度相同的新数组，这个数组将保存布尔值来指示该项目是否处于活动状态。

我没有登录 plunk，所以这里是你的修改版本。

index.html

1
2
3
4
5
6
7
8
9
10
  <body ng-controller="MainCtrl as vm">
   
     
        <button ng-click="vm.setActive($index)" ng-class="vm.isActive[$index] ? 'btn btn-primary' : 'btn'">{{button.name}}</button>
     
     
        {{button.extraInfo}}
     
   
  </body>

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.controller('MainCtrl', function($scope) {
  $scope.buttons = [
    { name: 'One', extraInfo: 'Extra info for button 1' },
    { name: 'Two', extraInfo: 'Extra info for button 2' },
    { name: 'Three', extraInfo: 'Extra info for button 3' }
  ];
  var vm = this;
  vm.isActive =[];
  for(var i=0, len=$scope.buttons.length; i < len; i++){
      vm.isActive[i] = false;
    }

  vm.setActive = function(ind) {
    for(var i=0, len=vm.isActive.length; i < len; i++){
      vm.isActive[i] = i===ind;
    }
  }

});

如果您不想更改实际数组，则维护另一个对象或数组，该对象或数组将保存每个按钮的显示/隐藏状态的关键。

1
2
3
4
5
6
7
8
9
10
11
12
13
  $scope.showInfo = {};
  $scope.buttons = [
    { name: 'One', extraInfo: 'Extra info for button 1' },
    { name: 'Two', extraInfo: 'Extra info for button 2' },
    { name: 'Three', extraInfo: 'Extra info for button 3' }
  ];

  $scope.changeShowInfo = function(index) {
    for(var prop in $scope.showInfo) {
      $scope.showInfo[prop] = false;
    }
    $scope.showInfo[index] = true;
  };

解决了Plunker

您希望每次有 1 个按钮处于活动状态，因此您最好使用单选按钮，并使用 ng-bind 将 currentItem 保留在范围内。

HTML:

1
2
3
4
5
6
7
8
9
10
<body ng-controller="MainCtrl">
   
       
            <label>
                <input type="radio" ng-model="$parent.selectedItem" ng-value="button"> {{button.name}}
            </label>
       
   
    Extra info: {{selectedItem.extraInfo}}
</body>

不需要改变你的 JS。

在此处查看 Plunker