大佬教程收集整理的这篇文章主要介绍了AngularJS多选模型数据绑定,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
最初,我有一个模型y的表单,有一个xs的多重选择,如下所示:
控制器:
function test($scopE) { $scope.xs = [ {id:1,value:'value 1'},{id:2,value:'value 2'},{id:3,value:'value 3'} ]; $scope.y = {xs:[2]}; }
视图:
<div ng-controller="test"> <SELEct multiple ng-model="y.xs" ng-options="x.id as x.value for x in xs"> </SELEct> </div>
结果是所选项目的数组.
http://plnkr.co/edit/s3tvvHeyE17TVH5KNkPZ
一切都很好,但我需要将其更改为复选框列表,发现我不能再使用数组了.
我尝试使用转发器的索引,如下所示:
<div ng-repeat="x in xs"> <input type="checkBox" ng-model="y.xs[$index]" ng-true-value="{{x.iD}}"/> {{x.value}} </div>
但要预先选择第二项,我需要使用它:
$scope.y = {xs: [null,'2']};
这没用.
http://plnkr.co/edit/9UfbKF2gFLnhTOKu3Yep
<div ng-repeat="x in xs"> <input type="checkBox" ng-model="y.xs[x.id]"/> {{x.value}} </div>
http://plnkr.co/edit/Xek8alEJbwq3g0NAPMcF
但如果取消选择项目,您最终会看到如下内容:
y={ "xs": { "1": false,"2": false,"3": false } }
$scope.$watch('y.xs',function(n) { for (var k in n) if (n.hasOwnProperty(k) && !n[k]) delete n[k]; },truE);
http://plnkr.co/edit/S1C1g5fYKzUZb7b0pRtp
它有效,但感觉不尽如人意.
更新
根据建议使用自定义指令,我想出了这个解决方案,它将选择保持为列表.
指示:
angular.module('checkBox',[]) .directive('checkBoxList',function () { return { reStrict: 'A',replace: true,scope: { SELEction: '=',items: '=',value: '@',label: '@' },template: '<div ng-repeat="item in list">' + '<label>' + '<input type="checkBox" value="{{item.value}}" ng-checked="item.checked" ng-click="toggle($indeX)"/>' + '{{item.label}}' + '</label>' + '</div>',controller: ['$scope',function ($scope) { $scope.toggle = function (indeX) { var item = $scope.list[index],i = $scope.SELEction.indexOf(item.value); item.checked = !item.checked; if (!item.checked && i > -1) { $scope.SELEction.splice(i,1); } else if (item.checked && i < 0) { $scope.SELEction.push(item.value); } }; $scope.$watch('items',function (value) { $scope.list = []; if (angular.isArray(value)) { angular.forEach(value,function (item) { $scope.list.push({ value: item[$scope.value],label: item[$scope.label],checked: $scope.SELEction.indexOf(item[$scope.value]) > -1 }); }); } },truE); }] }; });
视图:
<div checkBox-list SELEction="a.bs" items="bs" value="id" label="name"> </div>
至于数据绑定方法,我的数据结构实际上与你的数据结构非常相似,但在我的方法中,我添加了一个表示复选框状态的属性.
$scope.xs = [ { id:1,value:'value 1',checked: false },{ id:2,value:'value 2',{ id:3,value:'value 3',checked: false } ];
我把它传递给这样的指令:
<div multi-SELEct input-model="xs" button-label="value" item-label="id value" tick-property="checked" > </div>
勾选/取消勾选复选框时,该指令将相应地修改输入模型$scope.xs.checked.为此,我为每个复选框附加了一个单击处理程序.这个处理程序将调用一个函数,我在其中传递checkBox对象作为函数参数.然后,此函数将同步复选框状态和模型.
要获得选中/勾选的复选框,您只需将$scope.xs循环到.checked === true
angular.forEach( $scope.xs,function( value,key ) { if ( value.checked === true ) { // Do your stuff here } });
原谅我的英语不好,希望这有帮助.干杯.
以上是大佬教程为你收集整理的AngularJS多选模型数据绑定全部内容,希望文章能够帮你解决AngularJS多选模型数据绑定所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。