Question

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

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

看起来很简单，但ng-hide处理范围的方式（范围：true）意味着我无法真正查看其他范围并关闭其中每个范围。另一件事是，如果可能的话，我不想从ng-repeat改变实际的数组。这是来自我必须发回的API的数据，而我是＆＃39;如果可以，我试图不改变实际的数据结构。

<div class="row" ng-repeat="button in buttons">
    <div class="col-sm-2">
        <button ng-click="showInfo = !showInfo" class="btn btn-primary">{{button.name}}</button>
    </div>
    <div ng-show="showInfo" class="col-sm-3">
        <div class="alert alert-success">{{button.extraInfo}}</div>
    </div>
</div>

和JS

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' }
  ];
});

Answer 1

我建议创建一个与buttons数组长度相同的新数组，这个数组将保存布尔值，以指示项目的活动位置。

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

的index.html

  <body ng-controller="MainCtrl as vm">
    <div class="row" ng-repeat="button in buttons track by $index">
      <div class="col-sm-2">
        <button ng-click="vm.setActive($index)" ng-class="vm.isActive[$index] ? 'btn btn-primary' : 'btn'">{{button.name}}</button>
      </div>
      <div ng-show="vm.isActive[$index]" class="col-sm-3">
        <div class="alert alert-success">{{button.extraInfo}}</div>
      </div>
    </div>
  </body>

app.js

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

});

Answer 2

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

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

Solved Plunker

Answer 3

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

HTML：

<body ng-controller="MainCtrl">
    <div name="myForm">
        <div ng-repeat="button in buttons">
            <label>
                <input type="radio" ng-model="$parent.selectedItem" ng-value="button"> {{button.name}}
            </label>
        </div>
    </div>
    <div class="alert alert-success">Extra info: {{selectedItem.extraInfo}}</div>
</body>

不需要改变你的JS。

See Plunker here

Angular + Bootstrap中的活动按钮状态

3 个答案: