您的位置:首页 > 编程语言 > Lua

angluarjs 复选框实现多选功能

2017-10-27 10:20 281 查看
直接上代码, 用选择用户做说明

控制器:

//为了说明这里直接写的js数据, 实际中可以通过后台获取数据

$scope.userData = [{'userId':'1', 'userName':'张三', 'checkFlag':'1'},{'userId':'2', 'userName':'李三', 'checkFlag':'0'},{'userId':'3', 'userName':'王五', 'checkFlag':'1'}];

//保存方法

$scope.save=function(){

//userData中的checkFlag会根据选中的值自动变化, 只需要将userData回传服务器, 就可以根据checkFlag的值进行操作数据库

}

视图:

<div   ng-repeat="a in userData" >

<label ><input type='checkbox' ng-model='a.checkFlag' ng-true-value='1'  ng-false-value='0'/> {{a.userName}} </label>

</div>

<div><input type='button' ng-click='save()' />

页面显示的时候会自动根据checkFlag的值来确定复选框是否默认选中。保存代码也非常简单, 请看save方法里面的说明。

总结:angularjs的确很方便, 我们用angularjs就不要想到jquery的方法, 尽量不要在js里引入jquery。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息