在用AngularJS选中n个复选框时禁用其余复选框
在用AngularJS选中n个复选框时禁用其余复选框
提问于 2015-03-25 15:56:35
我才刚开始学AngularJS，所以请容忍我。
我有一个应用程序，它的列表被绑定到一系列对象(D&D咒语)。该列表通过绑定到对象的各种值来显示对象的所有内容。它们对搜索文本框(query)的值进行筛选，并根据拼写对象的两个属性(级别和名称)进行排序。一切都很好。
<div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'">
<a id="level-{{spellKey}}" class="anchor"></a>
<div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']">
<a id="spell-{{spell.name | replaceSpaces}}" class="anchor"></a>
...
</div>
</div>我有第二个列表，放在我的导航栏中，它绑定到同一个数组中。它只显示名称和每个名称旁边的复选框；复选框决定是否在第一个列表中列出每个对象(方法是将spell.prepared设置为true或false)。这也很好。
<div class="navbar-header">
<form class="form-inline navbar-left col-xs-10" role="search">
...
</form>
<div class="col-xs-2">
<!-- button that displays list of spell links and checkboxes -->
<button type="button" id="btn-toggle-navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spell-nav">
...
</button>
</div>
<div class="collapse navbar-collapse" id="spell-nav">
<div class="checkbox" style="padding-bottom: 4px;">
<label>
<input type="checkbox" id="cbHideNonPrepared" ng-model="hideNonPrepared" />
Hide non-prepared
</label>
</div>
<div ng-repeat="(linkKey, linkValue) in spells | groupBy:'level'">
...
<ul style="list-style-type: none">
<li ng-repeat="spellLink in linkValue" class="checkbox">
<label>
<input type="checkbox" ng-model="spellLink.prepared" ng-class="{true: 'invis'}[spellLink.alwaysPrepared || spellLink.level == 0]" />
<a href="#spell-{{spellLink.name | replaceSpaces}}" ng-click="onSpellLinkClick($event)">{{spellLink.name}}</a>
</label>
</li>
</ul>
</div>
</div>
</div>
...
<!-- previous code block with added 'ng-hide' -->
<div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'">
<a id="level-{{spellKey}}" class="anchor"></a>
<div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']"
ng-hide="hideNonPrepared && !spell.prepared">
<a id="spell-{{spell.name | replaceSpaces}}" class="anchor"></a>
...
</div>
</div>最后，我希望将复选框的数量限制为在$scope中指定的某个值(碰巧为9，但可以是任意整数)。我还想排除spell.alwaysPrepared == true中的任何值，但我假设这只是我以后可以添加的一个filter。
这就是我不知道该怎么继续的地方。我想也许我应该设置ng-check，但我不确定是什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-25 16:36:25
在某些情况下，可以使用ng-残疾人士禁用复选框。
下面是一个如何为您工作的例子。这里的关键是创建一个函数，该函数将被调用每个摘要周期，以确定是否应该禁用每个复选框。
angular.module("spells", [])
.controller("spellController", function($scope) {
$scope.shouldDisable = function(spell) {
return $scope.numPreparedSpells() == $scope.maxPreparedSpells && !spell.isPrepared;
};
$scope.spells = [
{name: "Magic Missile", isPrepared: false},
{name: "Lightning bolt", isPrepared: false},
{name: "Cure Major Wounds", isPrepared: false}
];
$scope.maxPreparedSpells = 2;
$scope.numPreparedSpells = function() {
var numPrepared = 0, len = $scope.spells.length;
for(var i = 0; i < len; i++) {
if ($scope.spells[i].isPrepared) {
numPrepared++;
}
}
return numPrepared;
};
});设置就绪后，您的拼写列表HTML可能如下所示：
<div ng-controller="spellController">
<div ng-repeat="spell in spells">
<input type="checkbox" ng-model="spell.isPrepared" ng-disabled="shouldDisable(spell)"/>{{spell.name}}
</div>
</div>在柱塞上试一下。
这说明了基本的想法，但最好有一个O(n)解决方案：
angular.module("spells", [])
.controller("spellController", function($scope) {
$scope.shouldDisable = function(spell) {
return $scope.numPrepared == $scope.maxPreparedSpells && !spell.isPrepared;
};
$scope.spells = [
{name: "Magic Missile", isPrepared: false},
{name: "Lightning bolt", isPrepared: false},
{name: "Cure Major Wounds", isPrepared: false}
];
$scope.maxPreparedSpells = 2;
$scope.numPrepared = 0;
$scope.updateNumPreparedSpells = function(spell) {
if (spell.isPrepared) {
$scope.numPrepared++;
}
else {
$scope.numPrepared--;
}
};
});诀窍是每次单击复选框时都调用updateNumPreparedSpells：
<input type="checkbox" ng-click="updateNumPreparedSpells(spell)" ng-model="spell.isPrepared" ng-disabled="shouldDisable(spell)"/>{{spell.name}}现在，不需要遍历法术列表来计算准备好的数量。当然，这假设每个拼写的准备状态只能通过单击复选框来更改。如果数据可以在其他地方更改，计数可能是不正确的。这种情况可以与已知的困难的缓存失效问题相媲美。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29260552
复制相关文章
相似问题
腾讯云开发者
