<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
我想绑定到控制器中的列表,以便每当复选框更改时,控制器都会维护所有列表。检查的值,例如
['apple', 'pear']
。ng-model似乎只能将一个复选框的值绑定到控制器中的变量。
是否还有另一个做到这一点的方法,以便可以将四个复选框绑定到控制器中的列表?
#1 楼
有两种方法可以解决此问题。使用简单数组或对象数组。每个解决方案都有其优缺点。在下面为每种情况找到一个。使用简单的数组作为输入数据
HTML可能如下所示:
<label ng-repeat="fruitName in fruits">
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruitName}}"
ng-checked="selection.indexOf(fruitName) > -1"
ng-click="toggleSelection(fruitName)"
> {{fruitName}}
</label>
相应的控制器代码将是:
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// Fruits
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
// Selected fruits
$scope.selection = ['apple', 'pear'];
// Toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// Is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// Is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
缺点:添加/删除很麻烦,因为必须管理两个列表(输入和选择)
使用对象数组作为输入数据
< br HTML可能类似于:
<label ng-repeat="fruit in fruits">
<!--
- Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
traditionally
- Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
(no two-way-data-binding)
- Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
is arbitrary. The property name could be anything and will be created on the object if not present.
-->
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruit.name}}"
ng-model="fruit.selected"
> {{fruit.name}}
</label>
,相应的控制器代码应为:
app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
// Fruits
$scope.fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
// Selected fruits
$scope.selection = [];
// Helper method to get selected fruits
$scope.selectedFruits = function selectedFruits() {
return filterFilter($scope.fruits, { selected: true });
};
// Watch fruits for changes
$scope.$watch('fruits|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (fruit) {
return fruit.name;
});
}, true);
}]);
优点:添加/删除非常容易
缺点:更为复杂的数据结构和按名称切换很麻烦,或者需要帮助方法
演示:http ://jsbin.com/ImAqUC/1/
评论
仅供参考,您可以注入filterFilter,而不是注入$ filter,然后按如下方式使用:return filterFilter($ scope.fruits,{checked:true});内置过滤器和自定义过滤器已使用名称为filterNameFilter的$ injector注册(“ filterName”应为斜体)-$ filterProvider docs
– Mark Rajcok
2013年1月25日19:04
因为使用了ng-model,所以value =“ {{fruit.name}}”和ng-checked =“ fruit.checked”是多余的。
– Mark Rajcok
2013年1月25日19:16
我注意到没有必要在模型中指定“选中”,Angular会自动设置属性:)
–daveoncode
13年7月9日在9:46
应该使用ng-change而不是ng-click,因为它可以更好地处理边缘情况。
– amccausl
2013年12月3日19:14
@ViktorMolokostov如果您要按传统方式提交表单,那将非常有用。意味着将其发布到动作处理程序(某些服务器端脚本)。使用php,具有类似名称的表单元素(使用方括号)会在请求数据中创建一个数组。这样,您可以轻松处理选定的水果。
–耀西
2015年12月25日14:42
#2 楼
一个简单的解决方案:<div ng-controller="MainCtrl">
<label ng-repeat="(color,enabled) in colors">
<input type="checkbox" ng-model="colors[color]" /> {{color}}
</label>
<p>colors: {{colors}}</p>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope){
$scope.colors = {Blue: true, Orange: true};
});
</script>
http://plnkr.co/edit/U4VD61?p=preview
评论
@kolypto-绝对是答案。我为使用对象的人(如我)重写了它:plnkr.co/edit/cqsADe8lKegsBMgWMyB8?p=preview
–凯尔
2014年3月20日在21:33
我和您一样,但是color中启用了(color,enabled)的功能是什么?
–塞巴斯蒂安
2014年7月29日7:49
@Sebastian,因为颜色是一个对象,所以当您对其进行迭代时,会得到(key,value)对。
–kolypto
2014年7月29日9:00
虽然我非常喜欢这个答案!我认为,使用对象作为数据源存在一个主要问题。也就是说,由于根据定义,对象属性的顺序是不确定的,因此在显示复选框时无法提供确定的顺序。还是+1;)
–耀西
2014-09-17 16:28
颜色应该命名为isSelected,比color [color]更容易阅读isSelected [color]
–德米特里·扎伊采夫(Dmitri Zaitsev)
15年5月4日在2:38
#3 楼
<input type='checkbox' ng-repeat="fruit in fruits"
ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">
。
function SomeCtrl ($scope) {
$scope.fruits = ["apple, orange, pear, naartjie"];
$scope.checkedFruits = [];
$scope.toggleCheck = function (fruit) {
if ($scope.checkedFruits.indexOf(fruit) === -1) {
$scope.checkedFruits.push(fruit);
} else {
$scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
}
};
}
评论
爱这是多么简单,正是我要寻找的(尽管我不得不承认@vitalets指令非常了不起)。我对Umur的代码做了一些修改以创建这种提琴:jsfiddle.net/samurai_jane/9mwsbfuc
–samurai_jane
16年12月14日在13:51
我说的是武士简矿!显示我所需要的东西多么简单! :)
–弗朗西斯·罗德里格斯(Francis Rodrigues)
17年5月10日在20:20
#4 楼
这是一个快速的可重用的伪指令,似乎可以执行您想要的操作。我简称为checkList
。它会在复选框更改时更新数组,并在数组更改时更新复选框。 app.directive('checkList', function() {
return {
scope: {
list: '=checkList',
value: '@'
},
link: function(scope, elem, attrs) {
var handler = function(setup) {
var checked = elem.prop('checked');
var index = scope.list.indexOf(scope.value);
if (checked && index == -1) {
if (setup) elem.prop('checked', false);
else scope.list.push(scope.value);
} else if (!checked && index != -1) {
if (setup) elem.prop('checked', true);
else scope.list.splice(index, 1);
}
};
var setupHandler = handler.bind(null, true);
var changeHandler = handler.bind(null, false);
elem.bind('change', function() {
scope.$apply(changeHandler);
});
scope.$watch('list', setupHandler, true);
}
};
});
这里是一个控制器和一个视图,显示了如何使用它。
<div ng-app="myApp" ng-controller='MainController'>
<span ng-repeat="fruit in fruits">
<input type='checkbox' value="{{fruit}}" check-list='checked_fruits'> {{fruit}}<br />
</span>
<div>The following fruits are checked: {{checked_fruits | json}}</div>
<div>Add fruit to the array manually:
<button ng-repeat="fruit in fruits" ng-click='addFruit(fruit)'>{{fruit}}</button>
</div>
</div>
app.controller('MainController', function($scope) {
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
$scope.checked_fruits = ['apple', 'pear'];
$scope.addFruit = function(fruit) {
if ($scope.checked_fruits.indexOf(fruit) != -1) return;
$scope.checked_fruits.push(fruit);
};
});
(按钮显示更改数组也会更新复选框。)
最后,这是对Plunker执行的指令示例:http://plnkr.co/edit/3YNLsyoG4PIBW6Kj7dRK?p=preview
评论
谢谢布兰登,这正是我想要的(也正是这个问题所要的,与其他答案不同)。我所做的唯一调整是将“ elem.on('change',function()...”更改为“ elem.bind('change',function()...”),从而消除了对jQuery的依赖。
–乔纳森·莫法特(Jonathan Moffatt)
13年7月23日在22:59
这非常好,但是以某种方式破坏了我使用ng-disabled的能力:(有什么办法可以解决这个问题吗?
– Nikolaj Dam Larsen
13-10-17在23:14
超级有用!甚至为我工作时使用对象而不是源列表和数据列表的数组!
– SteeveShaffer
2014-2-26的2:57
我同意所有人。这是最有用且无疑是可重用的一个!!谢谢你的辛勤工作。 :)
– maksbd19
2015年4月1日在18:16
如果您在AngularJS> = 1.4.4时遇到问题,请检查github.com/angular/angular.js/issues/13037:将值:'@'替换为值:'= ngValue'
– tanguy_k
2015年10月7日17:34
#5 楼
根据此线程中的答案,我创建了涵盖所有情况的checklist-model指令:简单的基元数组
对象数组(拾取ID或整个对象)
对象属性迭代
对于主题初学者而言,应该是:
<label ng-repeat="fruit in ['apple', 'orange', 'pear', 'naartjie']">
<input type="checkbox" checklist-model="selectedFruits" checklist-value="fruit"> {{fruit}}
</label>
评论
看起来像我所需要的。您是否有机会解释异步获取数据时如何使用它?那部分让我感到困惑。
– Dan Cancro
2014年12月12日12:06
异步获取数据后,只需在范围中修改checlist模型即可,在上述示例中为selectedFruits。
– Adrian Ber
15年7月30日在9:42
#6 楼
使用字符串$index
可以帮助使用选定值的哈希表:<ul>
<li ng-repeat="someItem in someArray">
<input type="checkbox" ng-model="someObject[$index.toString()]" />
</li>
</ul>
这样,ng-model对象将使用代表索引的键进行更新。
$scope.someObject = {};
过一会儿,
$scope.someObject
应该看起来像:$scope.someObject = {
0: true,
4: false,
1: true
};
此方法不适用于所有情况,但易于实现。
评论
这是一个非常优雅的解决方案,适合我的情况(使用AJAX)
–斯蒂芬·莫勒(StephanMøller)
2014年12月5日上午11:21
使用亲吻方法
– Geomorillo
17年2月27日在5:15
#7 楼
由于您接受了不使用列表的答案,因此我假设我的评论问题的答案是“不,它不一定是列表”。我还给人一种印象,就是您可能正在使用HTML服务器端,因为示例HTML中出现了“ checked”(如果使用ng-model来对复选框进行建模,则不需要这样做)。无论如何,这是我问这个问题时想到的,还假设您正在生成HTML服务器端:
<div ng-controller="MyCtrl"
ng-init="checkboxes = {apple: true, orange: false, pear: true, naartjie: false}">
<input type="checkbox" ng-model="checkboxes.apple">apple
<input type="checkbox" ng-model="checkboxes.orange">orange
<input type="checkbox" ng-model="checkboxes.pear">pear
<input type="checkbox" ng-model="checkboxes.naartjie">naartjie
<br>{{checkboxes}}
</div>
ng-init允许服务器端生成的HTML最初用于设置某些复选框。
小提琴。
#8 楼
我认为最简单的解决方法是在指定了“多个”的情况下使用“选择”:<select ng-model="selectedfruit" multiple ng-options="v for v in fruit"></select>
否则,我认为您必须处理列表以构造list
(通过
$watch()
将模型数组与复选框绑定)。评论
他要求一个复选框列表,但是您正在告诉他有关带选项的选择。完全不同。
–疯狂的安息日
16年6月14日在9:16
@CrazySabbath:但是,您不明白他在建议替代解决方案,此答案帮助了另外6个人作为“替代解决方案”
–好奇男孩
18年7月18日在21:54
#9 楼
我调整了Yoshi可接受的答案来处理复杂的对象(而不是字符串)。HTML
<div ng-controller="TestController">
<p ng-repeat="permission in allPermissions">
<input type="checkbox" ng-checked="selectedPermissions.containsObjectWithProperty('id', permission.id)" ng-click="toggleSelection(permission)" />
{{permission.name}}
</p>
<hr />
<p>allPermissions: | <span ng-repeat="permission in allPermissions">{{permission.name}} | </span></p>
<p>selectedPermissions: | <span ng-repeat="permission in selectedPermissions">{{permission.name}} | </span></p>
</div>
JavaScript
Array.prototype.indexOfObjectWithProperty = function(propertyName, propertyValue)
{
for (var i = 0, len = this.length; i < len; i++) {
if (this[i][propertyName] === propertyValue) return i;
}
return -1;
};
Array.prototype.containsObjectWithProperty = function(propertyName, propertyValue)
{
return this.indexOfObjectWithProperty(propertyName, propertyValue) != -1;
};
function TestController($scope)
{
$scope.allPermissions = [
{ "id" : 1, "name" : "ROLE_USER" },
{ "id" : 2, "name" : "ROLE_ADMIN" },
{ "id" : 3, "name" : "ROLE_READ" },
{ "id" : 4, "name" : "ROLE_WRITE" } ];
$scope.selectedPermissions = [
{ "id" : 1, "name" : "ROLE_USER" },
{ "id" : 3, "name" : "ROLE_READ" } ];
$scope.toggleSelection = function toggleSelection(permission) {
var index = $scope.selectedPermissions.indexOfObjectWithProperty('id', permission.id);
if (index > -1) {
$scope.selectedPermissions.splice(index, 1);
} else {
$scope.selectedPermissions.push(permission);
}
};
}
工作示例:http://jsfiddle.net/tCU8v/
评论
如果没有包装或匹配的
#10 楼
另一个简单的指令可能是:var appModule = angular.module("appModule", []);
appModule.directive("checkList", [function () {
return {
restrict: "A",
scope: {
selectedItemsArray: "=",
value: "@"
},
link: function (scope, elem) {
scope.$watchCollection("selectedItemsArray", function (newValue) {
if (_.contains(newValue, scope.value)) {
elem.prop("checked", true);
} else {
elem.prop("checked", false);
}
});
if (_.contains(scope.selectedItemsArray, scope.value)) {
elem.prop("checked", true);
}
elem.on("change", function () {
if (elem.prop("checked")) {
if (!_.contains(scope.selectedItemsArray, scope.value)) {
scope.$apply(
function () {
scope.selectedItemsArray.push(scope.value);
}
);
}
} else {
if (_.contains(scope.selectedItemsArray, scope.value)) {
var index = scope.selectedItemsArray.indexOf(scope.value);
scope.$apply(
function () {
scope.selectedItemsArray.splice(index, 1);
});
}
}
console.log(scope.selectedItemsArray);
});
}
};
}]);
控制器:
appModule.controller("sampleController", ["$scope",
function ($scope) {
//#region "Scope Members"
$scope.sourceArray = [{ id: 1, text: "val1" }, { id: 2, text: "val2" }];
$scope.selectedItems = ["1"];
//#endregion
$scope.selectAll = function () {
$scope.selectedItems = ["1", "2"];
};
$scope.unCheckAll = function () {
$scope.selectedItems = [];
};
}]);
和HTML:
<ul class="list-unstyled filter-list">
<li data-ng-repeat="item in sourceArray">
<div class="checkbox">
<label>
<input type="checkbox" check-list selected-items-array="selectedItems" value="{{item.id}}">
{{item.text}}
</label>
</div>
</li>
我还包括一个Plunker:http://plnkr.co/edit/XnFtyij4ed6RyFwnFN6V?p=preview
#11 楼
以下解决方案似乎是一个不错的选择,<label ng-repeat="fruit in fruits">
<input
type="checkbox"
ng-model="fruit.checked"
ng-value="true"
> {{fruit.fruitName}}
</label>
在控制器模型中,值
fruits
将像这样$scope.fruits = [
{
"name": "apple",
"checked": true
},
{
"name": "orange"
},
{
"name": "grapes",
"checked": true
}
];
评论
我越看这些示例,似乎就不得不将我的数组映射到对象数组中。
– Winnemucca
17年7月10日在4:40
#12 楼
您不必编写所有代码。 AngularJS只需使用ngTrueValue和ngFalseValue即可使模型和复选框保持同步Codepen在这里:http://codepen.io/paulbhartzog/pen/kBhzn
代码片段:
<p ng-repeat="item in list1" class="item" id="{{item.id}}">
<strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below
</p>
<pre>{{list1 | json}}</pre>
评论
这不是OP的要求。
– bfontaine
2014年9月4日在9:03
将复选框绑定到列表是问的,也是我所做的。可以修改该数组以适合该应用程序。关键是复选框已绑定。 ngTrueValue和ngFalseValue也可以用于映射到仅列出其他属性(例如名称)的第二个数组。
– Paul B. Hartzog
2014年9月4日在16:29
OP希望检查和未检查的已检查值列表,而不是所有值的列表。
– bfontaine
2014年9月4日下午16:38
#13 楼
签出可有效管理复选框列表的指令。希望它对您有用。检查清单模型
#14 楼
有一种方法可以直接在数组上工作,并通过ng-model-options="{ getterSetter: true }"
同时使用ng-model。诀窍是在ng-model中使用getter / setter函数。这样,您可以将数组用作真实模型,并在输入模型中“伪造”布尔值:
<label ng-repeat="fruitName in ['apple', 'orange', 'pear', 'naartjie']">
<input
type="checkbox"
ng-model="fruitsGetterSetterGenerator(fruitName)"
ng-model-options="{ getterSetter: true }"
> {{fruitName}}
</label>
$scope.fruits = ['apple', 'pear']; // pre checked
$scope.fruitsGetterSetterGenerator = function(fruitName){
return function myGetterSetter(nowHasFruit){
if (nowHasFruit !== undefined){
// Setter
fruitIndex = $scope.fruits.indexOf(fruit);
didHaveFruit = (fruitIndex !== -1);
mustAdd = (!didHaveFruit && nowHasFruit);
mustDel = (didHaveFruit && !nowHasFruit);
if (mustAdd){
$scope.fruits.push(fruit);
}
if (mustDel){
$scope.fruits.splice(fruitIndex, 1);
}
}
else {
// Getter
return $scope.user.fruits.indexOf(fruit) !== -1;
}
}
}
CAVEAT如果数组大到
myGetterSetter
,则不应该使用此方法将被多次调用。有关更多信息,请参见https://docs.angularjs.org/api/ng/directive/ngModelOptions。
#15 楼
我喜欢Yoshi的回答。我对其进行了增强,以便可以对多个列表使用相同的功能。<label ng-repeat="fruitName in fruits">
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruitName}}"
ng-checked="selection.indexOf(fruitName) > -1"
ng-click="toggleSelection(fruitName, selection)"> {{fruitName}}
</label>
<label ng-repeat="veggieName in veggies">
<input
type="checkbox"
name="selectedVeggies[]"
value="{{veggieName}}"
ng-checked="veggieSelection.indexOf(veggieName) > -1"
ng-click="toggleSelection(veggieName, veggieSelection)"> {{veggieName}}
</label>
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// fruits
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
$scope.veggies = ['lettuce', 'cabbage', 'tomato']
// selected fruits
$scope.selection = ['apple', 'pear'];
$scope.veggieSelection = ['lettuce']
// toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {
var idx = listSelection.indexOf(selectionName);
// is currently selected
if (idx > -1) {
listSelection.splice(idx, 1);
}
// is newly selected
else {
listSelection.push(selectionName);
}
};
}]);
http://plnkr.co/edit/KcbtzEyNMA8s1X7Hja8p?p=preview
#16 楼
如果您具有相同格式的多个复选框控制器代码
vm.doYouHaveCheckBox = ['aaa', 'ccc', 'bbb'];
vm.desiredRoutesCheckBox = ['ddd', 'ccc', 'Default'];
vm.doYouHaveCBSelection = [];
vm.desiredRoutesCBSelection = [];
查看代码
<div ng-repeat="doYouHaveOption in vm.doYouHaveCheckBox">
<div class="action-checkbox">
<input id="{{doYouHaveOption}}" type="checkbox" value="{{doYouHaveOption}}" ng-checked="vm.doYouHaveCBSelection.indexOf(doYouHaveOption) > -1" ng-click="vm.toggleSelection(doYouHaveOption,vm.doYouHaveCBSelection)" />
<label for="{{doYouHaveOption}}"></label>
{{doYouHaveOption}}
</div>
</div>
<div ng-repeat="desiredRoutesOption in vm.desiredRoutesCheckBox">
<div class="action-checkbox">
<input id="{{desiredRoutesOption}}" type="checkbox" value="{{desiredRoutesOption}}" ng-checked="vm.desiredRoutesCBSelection.indexOf(desiredRoutesOption) > -1" ng-click="vm.toggleSelection(desiredRoutesOption,vm.desiredRoutesCBSelection)" />
<label for="{{desiredRoutesOption}}"></label>
{{desiredRoutesOption}}
</div>
</div>
#17 楼
灵感来自上面Yoshi的帖子。这是plnkr。
(function () {
angular
.module("APP", [])
.controller("demoCtrl", ["$scope", function ($scope) {
var dc = this
dc.list = [
"Selection1",
"Selection2",
"Selection3"
]
dc.multipleSelections = []
dc.individualSelections = []
// Using splice and push methods to make use of
// the same "selections" object passed by reference to the
// addOrRemove function as using "selections = []"
// creates a new object within the scope of the
// function which doesn't help in two way binding.
dc.addOrRemove = function (selectedItems, item, isMultiple) {
var itemIndex = selectedItems.indexOf(item)
var isPresent = (itemIndex > -1)
if (isMultiple) {
if (isPresent) {
selectedItems.splice(itemIndex, 1)
} else {
selectedItems.push(item)
}
} else {
if (isPresent) {
selectedItems.splice(0, 1)
} else {
selectedItems.splice(0, 1, item)
}
}
}
}])
})()
label {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="APP" ng-controller="demoCtrl as dc">
<h1>checkbox-select demo</h1>
<h4>Multiple Selections</h4>
<label ng-repeat="thing in dc.list">
<input
type="checkbox"
ng-checked="dc.multipleSelections.indexOf(thing) > -1"
ng-click="dc.addOrRemove(dc.multipleSelections, thing, true)"
> {{thing}}
</label>
<p>
dc.multipleSelections :- {{dc.multipleSelections}}
</p>
<hr>
<h4>Individual Selections</h4>
<label ng-repeat="thing in dc.list">
<input
type="checkbox"
ng-checked="dc.individualSelections.indexOf(thing) > -1"
ng-click="dc.addOrRemove(dc.individualSelections, thing, false)"
> {{thing}}
</label>
<p>
dc.invidualSelections :- {{dc.individualSelections}}
</p>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
#18 楼
根据我在此处的其他文章,我做了一个可重用的指令。检查GitHub存储库
(function () {
angular
.module("checkbox-select", [])
.directive("checkboxModel", ["$compile", function ($compile) {
return {
restrict: "A",
link: function (scope, ele, attrs) {
// Defining updateSelection function on the parent scope
if (!scope.$parent.updateSelections) {
// Using splice and push methods to make use of
// the same "selections" object passed by reference to the
// addOrRemove function as using "selections = []"
// creates a new object within the scope of the
// function which doesn't help in two way binding.
scope.$parent.updateSelections = function (selectedItems, item, isMultiple) {
var itemIndex = selectedItems.indexOf(item)
var isPresent = (itemIndex > -1)
if (isMultiple) {
if (isPresent) {
selectedItems.splice(itemIndex, 1)
} else {
selectedItems.push(item)
}
} else {
if (isPresent) {
selectedItems.splice(0, 1)
} else {
selectedItems.splice(0, 1, item)
}
}
}
}
// Adding or removing attributes
ele.attr("ng-checked", attrs.checkboxModel + ".indexOf(" + attrs.checkboxValue + ") > -1")
var multiple = attrs.multiple ? "true" : "false"
ele.attr("ng-click", "updateSelections(" + [attrs.checkboxModel, attrs.checkboxValue, multiple].join(",") + ")")
// Removing the checkbox-model attribute,
// it will avoid recompiling the element infinitly
ele.removeAttr("checkbox-model")
ele.removeAttr("checkbox-value")
ele.removeAttr("multiple")
$compile(ele)(scope)
}
}
}])
// Defining app and controller
angular
.module("APP", ["checkbox-select"])
.controller("demoCtrl", ["$scope", function ($scope) {
var dc = this
dc.list = [
"selection1",
"selection2",
"selection3"
]
// Define the selections containers here
dc.multipleSelections = []
dc.individualSelections = []
}])
})()
label {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="APP" ng-controller="demoCtrl as dc">
<h1>checkbox-select demo</h1>
<h4>Multiple Selections</h4>
<label ng-repeat="thing in dc.list">
<input type="checkbox" checkbox-model="dc.multipleSelections" checkbox-value="thing" multiple>
{{thing}}
</label>
<p>dc.multipleSelecitons:- {{dc.multipleSelections}}</p>
<h4>Individual Selections</h4>
<label ng-repeat="thing in dc.list">
<input type="checkbox" checkbox-model="dc.individualSelections" checkbox-value="thing">
{{thing}}
</label>
<p>dc.individualSelecitons:- {{dc.individualSelections}}</p>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
#19 楼
在HTML中(假设复选框位于表中每一行的第一列中)。<tr ng-repeat="item in fruits">
<td><input type="checkbox" ng-model="item.checked" ng-click="getChecked(item)"></td>
<td ng-bind="fruit.name"></td>
<td ng-bind="fruit.color"></td>
...
</tr>
在
controllers.js
文件中:// The data initialization part...
$scope.fruits = [
{
name: ....,
color:....
},
{
name: ....,
color:....
}
...
];
// The checked or not data is stored in the object array elements themselves
$scope.fruits.forEach(function(item){
item.checked = false;
});
// The array to store checked fruit items
$scope.checkedItems = [];
// Every click on any checkbox will trigger the filter to find checked items
$scope.getChecked = function(item){
$scope.checkedItems = $filter("filter")($scope.fruits,{checked:true});
};
#20 楼
这是另一个解决方案。我的解决方案的优势在于:它不需要任何其他手表(可能会对性能产生影响)
它不需要控制器中的任何代码来保持其清洁
代码仍然很短
因为它只是一个指令,所以只需很少的代码即可在多个地方重用
这里是指令:
function ensureArray(o) {
var lAngular = angular;
if (lAngular.isArray(o) || o === null || lAngular.isUndefined(o)) {
return o;
}
return [o];
}
function checkboxArraySetDirective() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
var name = attrs.checkboxArraySet;
ngModel.$formatters.push(function(value) {
return (ensureArray(value) || []).indexOf(name) >= 0;
});
ngModel.$parsers.push(function(value) {
var modelValue = ensureArray(ngModel.$modelValue) || [],
oldPos = modelValue.indexOf(name),
wasSet = oldPos >= 0;
if (value) {
if (!wasSet) {
modelValue = angular.copy(modelValue);
modelValue.push(name);
}
} else if (wasSet) {
modelValue = angular.copy(modelValue);
modelValue.splice(oldPos, 1);
}
return modelValue;
});
}
}
}
最后请像这样使用它:
<input ng-repeat="fruit in ['apple', 'banana', '...']" type="checkbox" ng-model="fruits" checkbox-array-set="{{fruit}}" />
这就是全部。唯一的增加是
checkbox-array-set
属性。#21 楼
您可以将AngularJS和jQuery结合使用。例如,您需要在控制器中定义一个数组$scope.selected = [];
。<label ng-repeat="item in items">
<input type="checkbox" ng-model="selected[$index]" ng-true-value="'{{item}}'">{{item}}
</label>
您可以获得拥有所选项目的数组。使用方法
alert(JSON.stringify($scope.selected))
,可以检查选择的项目。评论
完美!...这是使用数组而不是对象的最简单解决方案
–马里奥·坎帕(Mario Campa)
16年5月26日在2:13
不要结合Jquery和Angular
–詹斯·阿列纽斯(Jens Alenius)
16年5月30日在13:29
这将导致所选阵列中出现孔。检查这篇文章
– Vikas Gautam
2016年7月8日在21:06
#22 楼
<div ng-app='app' >
<div ng-controller='MainCtrl' >
<ul>
<li ng-repeat="tab in data">
<input type='checkbox' ng-click='change($index,confirm)' ng-model='confirm' />
{{tab.name}}
</li>
</ul>
{{val}}
</div>
</div>
var app = angular.module('app', []);
app.controller('MainCtrl',function($scope){
$scope.val=[];
$scope.confirm=false;
$scope.data=[
{
name:'vijay'
},
{
name:'krishna'
},{
name:'Nikhil'
}
];
$scope.temp;
$scope.change=function(index,confirm){
console.log(confirm);
if(!confirm){
($scope.val).push($scope.data[index]);
}
else{
$scope.temp=$scope.data[index];
var d=($scope.val).indexOf($scope.temp);
if(d!=undefined){
($scope.val).splice(d,1);
}
}
}
})
#23 楼
看看这个:checklist-model。它与JavaScript数组和对象一起使用,并且可以使用静态HTML复选框,而无需ng-repeat
<label><input type="checkbox" checklist-model="roles" value="admin"> Administrator</label>
<label><input type="checkbox" checklist-model="roles" value="customer"> Customer</label>
<label><input type="checkbox" checklist-model="roles" value="guest"> Guest</label>
<label><input type="checkbox" checklist-model="roles" value="user"> User</label>
和JavaScript端:
var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl4a', function($scope) {
$scope.roles = [];
});
#24 楼
一种简单的HTML唯一实现方式: <input type="checkbox"
ng-checked="fruits.indexOf('apple') > -1"
ng-click="fruits.indexOf('apple') > -1 ? fruits.splice(fruits.indexOf('apple'), 1) : fruits.push('apple')">
<input type="checkbox"
ng-checked="fruits.indexOf('orange') > -1"
ng-click="fruits.indexOf('orange') > -1 ? fruits.splice(fruits.indexOf('orange'), 1) : fruits.push('orange')">
<input type="checkbox"
ng-checked="fruits.indexOf('pear') > -1"
ng-click="fruits.indexOf('pear') > -1 ? fruits.splice(fruits.indexOf('pear'), 1) : fruits.push('pear')">
<input type="checkbox"
ng-checked="fruits.indexOf('naartjie') > -1"
ng-click="fruits.indexOf('apple') > -1 ? fruits.splice(fruits.indexOf('apple'), 1) : fruits.push('naartjie')">
#25 楼
我以@UmurKontacı的示例为例,认为是用来捕获整个对象/数组(如编辑页面)中的选定数据的。在数据库中捕获选项
切换某些选项
例如,以下所有颜色json:
{
"colors": [
{
"id": 1,
"title": "Preto - #000000"
},
{
"id": 2,
"title": "Azul - #005AB1"
},
{
"id": 3,
"title": "Azul Marinho - #001A66"
},
{
"id": 4,
"title": "Amarelo - #FFF100"
},
{
"id": 5,
"title": "Vermelho - #E92717"
},
{
"id": 6,
"title": "Verde - #008D2F"
},
{
"id": 7,
"title": "Cinza - #8A8A8A"
},
{
"id": 8,
"title": "Prata - #C8C9CF"
},
{
"id": 9,
"title": "Rosa - #EF586B"
},
{
"id": 10,
"title": "Nude - #E4CAA6"
},
{
"id": 11,
"title": "Laranja - #F68700"
},
{
"id": 12,
"title": "Branco - #FFFFFF"
},
{
"id": 13,
"title": "Marrom - #764715"
},
{
"id": 14,
"title": "Dourado - #D9A300"
},
{
"id": 15,
"title": "Bordo - #57001B"
},
{
"id": 16,
"title": "Roxo - #3A0858"
},
{
"id": 18,
"title": "Estampado "
},
{
"id": 17,
"title": "Bege - #E5CC9D"
}
]
}
有2种类型的数据对象,带有一个对象的
array
和包含两个/多个对象数据的object
:在数据库中捕获了两个选定的项目:
[{"id":12,"title":"Branco - #FFFFFF"},{"id":16,"title":"Roxo - #3A0858"}]
数据库中捕获了一个选定的项目:
{"id":12,"title":"Branco - #FFFFFF"}
在这里,我的Javascript代码:
/**
* Add this code after catch data of database.
*/
vm.checkedColors = [];
var _colorObj = vm.formData.color_ids;
var _color_ids = [];
if (angular.isObject(_colorObj)) {
// vm.checkedColors.push(_colorObj);
_color_ids.push(_colorObj);
} else if (angular.isArray(_colorObj)) {
angular.forEach(_colorObj, function (value, key) {
// vm.checkedColors.push(key + ':' + value);
_color_ids.push(key + ':' + value);
});
}
angular.forEach(vm.productColors, function (object) {
angular.forEach(_color_ids, function (color) {
if (color.id === object.id) {
vm.checkedColors.push(object);
}
});
});
/**
* Add this code in your js function initialized in this HTML page
*/
vm.toggleColor = function (color) {
console.log('toggleColor is: ', color);
if (vm.checkedColors.indexOf(color) === -1) {
vm.checkedColors.push(color);
} else {
vm.checkedColors.splice(vm.checkedColors.indexOf(color), 1);
}
vm.formData.color_ids = vm.checkedColors;
};
我的HTML代码:
<div class="checkbox" ng-repeat="color in productColors">
<label>
<input type="checkbox"
ng-checked="checkedColors.indexOf(color) != -1"
ng-click="toggleColor(color)"/>
<% color.title %>
</label>
</div>
<p>checkedColors Output:</p>
<pre><% checkedColors %></pre>
[编辑]下面的重构代码:
function makeCheckedOptions(objectOptions, optionObj) {
var checkedOptions = [];
var savedOptions = [];
if (angular.isObject(optionObj)) {
savedOptions.push(optionObj);
} else if (angular.isArray(optionObj)) {
angular.forEach(optionObj, function (value, key) {
savedOptions.push(key + ':' + value);
});
}
angular.forEach(objectOptions, function (object) {
angular.forEach(savedOptions, function (color) {
if (color.id === object.id) {
checkedOptions.push(object);
}
});
});
return checkedOptions;
}
并按如下所示调用新方法:
vm.checkedColors = makeCheckedOptions(productColors, vm.formData.color_ids);
就是这样!
#26 楼
我已经在控制器中放置了一个数组。$scope.statuses = [{ name: 'Shutdown - Reassessment Required' },
{ name: 'Under Construction' },
{ name: 'Administrative Cancellation' },
{ name: 'Initial' },
{ name: 'Shutdown - Temporary' },
{ name: 'Decommissioned' },
{ name: 'Active' },
{ name: 'SO Shutdown' }]
在标记上,我已经放置了以下内容
<div ng-repeat="status in $scope.statuses">
<input type="checkbox" name="unit_status" ng-model="$scope.checkboxes[status.name]"> {{status.name}}
<br>
</div>
{{$scope.checkboxes}}
输出如下,在控制器中,我只需要检查其是真还是假?如果选中,则为true;如果未选中,则为false。
{
"Administrative Cancellation":true,
"Under Construction":true,
"Shutdown - Reassessment Required":true,
"Decommissioned":true,
"Active":true
}
希望有帮助。
#27 楼
我认为以下方法对于嵌套ng-repeats更清晰和有用。在Plunker上进行检查。从此线程引用:
<html ng-app="plunker">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="tab in mytabs">
<h1>{{tab.name}}</h1>
<div ng-repeat="val in tab.values">
<input type="checkbox" ng-change="checkValues()" ng-model="val.checked"/>
</div>
</div>
<br>
<pre> {{selected}} </pre>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope,$filter) {
$scope.mytabs = [
{
name: "tab1",
values: [
{ value: "value1",checked:false },
{ value: "value2", checked: false },
{ value: "value3", checked: false },
{ value: "value4", checked: false }
]
},
{
name: "tab2",
values: [
{ value: "value1", checked: false },
{ value: "value2", checked: false },
{ value: "value3", checked: false },
{ value: "value4", checked: false }
]
}
]
$scope.selected = []
$scope.checkValues = function () {
angular.forEach($scope.mytabs, function (value, index) {
var selectedItems = $filter('filter')(value.values, { checked: true });
angular.forEach(selectedItems, function (value, index) {
$scope.selected.push(value);
});
});
console.log($scope.selected);
};
});
</script>
</body>
</html>
#28 楼
这是相同的jsFillde链接,http://jsfiddle.net/techno2mahi/Lfw96ja6/。此指令使用可从http://vitalets.github.io/下载的指令。 checklist-model /。
这是具有指示性的好方法,因为您的应用程序经常需要此功能。
代码如下:
HTML:
<div class="container">
<div class="ng-scope" ng-app="app" ng-controller="Ctrl1">
<div class="col-xs-12 col-sm-6">
<h3>Multi Checkbox List Demo</h3>
<div class="well"> <!-- ngRepeat: role in roles -->
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
</div>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="checkFirst()">check first</button>
<div>
<h3>Selected User Roles </h3>
<pre class="ng-binding">{{user.roles|json}}</pre>
</div>
<br>
<div><b/>Provided by techno2Mahi</b></div>
</div>
JavaScript
var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) {
$scope.roles = [
'guest',
'user',
'customer',
'admin'
];
$scope.user = {
roles: ['user']
};
$scope.checkAll = function() {
$scope.user.roles = angular.copy($scope.roles);
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push('guest');
};
});
评论
HTML的格式不正确-与结束符
多。你有遗漏什么吗?
– Peter Mortensen
17年1月7日在15:32
– Peter Mortensen
17年1月7日在15:32
#29 楼
试试我的孩子:**
myApp.filter('inputSelected', function(){
return function(formData){
var keyArr = [];
var word = [];
Object.keys(formData).forEach(function(key){
if (formData[key]){
var keyCap = key.charAt(0).toUpperCase() + key.slice(1);
for (var char = 0; char<keyCap.length; char++ ) {
if (keyCap[char] == keyCap[char].toUpperCase()){
var spacedLetter = ' '+ keyCap[char];
word.push(spacedLetter);
}
else {
word.push(keyCap[char]);
}
}
}
keyArr.push(word.join(''))
word = [];
})
return keyArr.toString();
}
})
**
然后,对于任何带有复选框的ng-model,它将返回您选择的所有输入的字符串:
<label for="Heard about ITN">How did you hear about ITN?: *</label><br>
<label class="checkbox-inline"><input ng-model="formData.heardAboutItn.brotherOrSister" type="checkbox" >Brother or Sister</label>
<label class="checkbox-inline"><input ng-model="formData.heardAboutItn.friendOrAcquaintance" type="checkbox" >Friend or Acquaintance</label>
{{formData.heardAboutItn | inputSelected }}
//returns Brother or Sister, Friend or Acquaintance
评论
它必须是清单吗?对象会起作用吗?:,等等。模型将是:{“ apple”:true,“ orange”:false,“ pear”:true,“ naartjie“:true}尝试此Repo中的指令
一定要经过接受的答案。我认为还有另一个答案,那就是优雅得多。
naartjie!?那只是给你个老兄! :D
@ppumkin hehe刚刚看到了这个。你是对的:D