- 首页
- 前端开发
- Angular + Bootstrap 中的活动按钮状态
Angular + Bootstrap 中的活动按钮状态
[英] Active button states in Angular + Bootstrap
本文介绍了Angular + Bootstrap 中的活动按钮状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
看起来很简单的问题，但实际上我遇到了麻烦.
戳这里
基本上我有一个 ng-repeat 按钮，然后在单击按钮后会显示一段文本.但是，当我单击一个按钮时，我想隐藏所有 other 按钮中的文本块，并从其他按钮中删除活动状态.基本上一次只能显示 1 个按钮文本块.
看起来很简单，但是 ng-hide 处理范围的方式 (scope: true) 意味着我无法真正查看其他范围并关闭它们中的每一个.另一件事是如果可能的话，我不想从 ng-repeat 更改实际数组. 这是来自 API 的数据，我必须发回，我试图不如果可以，请更改实际的数据结构.
<div class="col-sm-2"><button ng-click="showInfo = !showInfo" class="btn btn-primary">{{button.name}}</button>
<div ng-show="showInfo" class="col-sm-3"><div class="alert alert-success">{{button.extraInfo}}</div>
和JS
app.controller('MainCtrl', function($scope) {$scope.buttons = [{ name: 'One', extraInfo: '按钮 1 的额外信息' },{ name: 'Two', extraInfo: '按钮 2 的额外信息' },{ name: '三', extraInfo: '按钮 3 的额外信息' }];});
解决方案
我建议创建一个与 buttons 数组长度相同的新数组，这个数组将保存布尔值来指示在哪里项目是否有效.
我没有登录 plunk 所以这里是你的修改版本.
index.html
<div class="row" ng-repeat="button in button 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}}</按钮>
<div ng-show="vm.isActive[$index]" class="col-sm-3"><div class="alert alert-success">{{button.extraInfo}}</div>
app.js
app.controller('MainCtrl', function($scope) {$scope.buttons = [{ name: 'One', extraInfo: '按钮 1 的额外信息' },{ name: 'Two', extraInfo: '按钮 2 的额外信息' },{ name: '三', extraInfo: '按钮 3 的额外信息' }];var vm = 这个；vm.isActive =[];for(var i=0, len=$scope.buttons.length; i < len; i++){vm.isActive[i] = false;}vm.setActive = 函数(索引){for(var i=0, len=vm.isActive.length; i < len; i++){vm.isActive[i] = i===ind;}}});
Seems like a simple problem but I'm actually having trouble with it.
Plunk here
Basically I have a ng-repeat of buttons and then a block of text after that clicking the button will show. However, when I click a button I want to hide the blocks of text from all the other buttons and remove the active states from the other buttons. Basically only 1 button block of text should be shown at a time.
Seems easy, but the way ng-hide handles scope (scope: true) means I can't really look into the other scopes and turn each of them off. The other thing is that I don't want to alter the actual array from ng-repeat if at all possible. This is data from an API that I have to send back and I'm attempting to not alter the actual data structure if I can.
<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>
And 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' }
];
});
解决方案
I suggest to create new array which has the same length as buttons array, and this array will hold boolean values to indicate where the item active or not.
I didn't log in to plunk so here the modified version of yours.
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;
}
}
});
这篇关于Angular + Bootstrap 中的活动按钮状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
