<强> http://plnkr.co/edit/7v63GXSIDon1QKm1GXCE?p=preview
我有一个数组
,它存储单击的每个按钮的名称。单击后,该对象将被放入数组中,我使用 ng-class 来检查数组中对象的名称是否与用于创建按钮的模型相同。然后,如果是这样,请打开或关闭 btn-info
类。
ng-class="{'btn-info': toggleArray[k].name == m.name}"
不确定我的代码出了什么问题,但是,如果您按照从 1 到 3 的确切顺序单击按钮,它就会起作用。但是,一旦您开始随机单击按钮,它就会很快崩溃。
Controller
.controller('ArrayCtrl', ['$scope', function($scope) {
// Init ArrayCtrl scope:
// ---------------------
var vs = $scope;
vs.message = "Add and remove objects from array:";
vs.toggleArray = [];
vs.apiArray = [{name: 'AAA'}, {name: 'BBB'}, {name: 'CCC'}];
vs.selectBtn = function(btnObj) {
var index = vs.toggleArray.indexOf(btnObj);
if (index !== -1) {
vs.toggleArray.splice(index, 1);
}
else {
vs.toggleArray.push(btnObj);
}
};
}
]);
标记
<div class="model-btns">
<ul>
<li ng-repeat="(k, m) in apiArray"
ng-click="selectBtn(m)"
class="tag-li">
<button class="btn"
ng-class="{'btn-info': toggleArray[k].name == m.name}">
{{m.name}}
</button>
</li>
</ul>
</div>
<div class="well list-delete">
<p>List to delete:</p>
<ul>
<li ng-repeat="item in toggleArray">
{{item}}
</li>
</ul>
</div>
最佳答案
问题就在这里:ng-class="{'btn-info':toggleArray[k].name == m.name}"
假设所有按钮均“关闭”,因此 toggleArray
为 []
。您单击第二个按钮,因此 toggleArray
将是 [ { "name": "BBB"} ]
。
但在该按钮的 ng-class 表达式中,k
将为 1。因此 toggleArray[1]
未定义,并且表达式永远不会为 true,除非您先单击第一个项目,因此 toggleArray
有 2 个元素。
您只需更改:
ng-class="{'btn-info': toggleArray[k].name == m.name}"
至:
ng-class="{'btn-info': toggleArray.indexOf(m) > -1}"
如this plnkr中所示.
关于javascript - 如何修复这个 ng-class 切换比较?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29837636/