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。
控制器:
//为了说明这里直接写的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。
相关文章推荐
- CheckedListBoxControl 实现复选框的单选与多选功能
- EasyUI datagrid 复选框可以多选但不能全选功能实现
- jquery实现复选框多选、单选、全不选功能,很实用
- 基于jQuery实现复选框的全选 全不选 反选功能
- gridview如何实现多选的功能。
- 常见js实现功能单选框、复选框、通过div模拟下拉列表框...
- 用jq实现购物车复选框的交互功能
- Javscript实现表单复选框的全选功能
- 关于Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现
- javascript实现复选框的全选功能
- Javscript实现表单复选框的全选功能
- JS中如何实现复选框全选功能
- 跨页面的多选功能实现
- iOS开发:UITableview的多选功能实现
- js实现清除筛选条件功能. js 中jquery.sumoselect 多选控件,去掉多选中多个选中的样式和文字,改成未选中
- 使用js实现复选框的全选、取消功能
- 基于ListView和CheckBox实现多选和全选记录的功能
- iPhone开发之实现UITableView多选删除功能详解
- iOS - UITableView 多选功能实现
- javascript实现复选框的全选功能