看似简单的问题，但实际上我遇到了麻烦。
基本上我有一个 ng-repeat 按钮，然后在单击按钮后会显示一段文本。但是，当我单击一个按钮时，我想隐藏所有其他 按钮的文本 block ，并从其他按钮中删除事件状态。基本上一次只能显示 1 个按钮文本 block 。
看起来很简单，但是 ng-hide 处理范围 (scope: true) 的方式意味着我无法真正查看其他范围并关闭它们。另一件事是，如果可能的话，我不想更改 ng-repeat 中的实际数组。这是来自 API 的数据，我必须发回并且我尝试不这样做如果可以的话，改变实际的数据结构。
<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' }
];
});
最佳答案
我建议创建与 buttons 数组长度相同的新数组，该数组将包含 bool 值以指示项目在何处处于事件状态。
我没有登录 plunk，所以这里是你的修改版本。
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>
应用程序.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;
}
}
});
关于javascript - Angular + Bootstrap 中的事件按钮状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28461181/