简介环境
这个AngularJS是在写项目的时候,使用到的,我发现还挺不错,就分享一下,使用angularjs如何实现全选,全不选,下拉框,单选
AngularJS全选/全不选
1、HTML页面中
我将页面先展示出来,主要是看全选按钮里边的属性 和遍历出来的选择框里边的数据
这两个按钮中的属性里边的数据,对应的是controller.js中的方法,先将controller.js复制到你的项目中,捋一遍逻辑就能看懂
//这个是全选按钮
<input type="checkbox"
ng-model="sellect_all" ng-click="ProSelectAll($event, list)"> 全选
</div></td>
<td width="70" height="29"><div class="STYLE1" align="center">编号</div></td>
<td width="80"><div class="STYLE1" align="center">供应商名称</div></td>
<td width="100"><div class="STYLE1" align="center">供应商描述</div></td>
<td width="100"><div class="STYLE1" align="center">联系人</div></td>
<td width="100"><div class="STYLE1" align="center">电话</div></td>
<td width="100"><div class="STYLE1" align="center">地址</div></td>
<td width="100"><div class="STYLE1" align="center">操作</div></td>
</tr>
<tr ng-repeat="entity in list">
<td width="70" height="29"><div class="STYLE1" align="center">
//这个是遍历出来的选择框
<input type="checkbox"ng-click="updateSelection($event,entity.proId)"
ng-model="select_one[entity.proId]"
/>
</div></td>
<td width="70" height="29"><div class="STYLE1" align="center">{{entity.proId}}</div></td>
<td width="80"><div class="STYLE1" align="center">{{entity.proName}}</div></td>
<td width="100"><div class="STYLE1" align="center">{{entity.proDesc}}</div></td>
<td width="100"><div class="STYLE1" align="center">{{entity.proRemark}}</div></td>
<td width="100"><div class="STYLE1" align="center">{{entity.proPhone}}</div></td>
<td width="100"><div class="STYLE1" align="center">{{entity.proAddr}}</div></td>
<td><span class="STYLE1"><a href="#" ng-click="deleteProvide(entity.proId)">删除</a>
2、controller.js中
注意事项:
$scope.list: 存放的是从后台查询过来的集合数据,在这篇文章中,我自定义模拟了一下后台数据
// 自定义数据列表 我是自定义了一个集合,你是通过后台查回来的数据!!!!!
$scope.list = [{"bId": "1","value": "aa"},{"bId": "2","value": "ewr"},
{"bId": "3","value": "erf"},{"bId": "4","value": "qwe"},
{"bId": "5","value": "vgf"}];
$scope.select_one=[]; // 单项是否选中状态集合,以 [{"1":true}...] 的方式存在,实际开发中,id 可能不是数字
$scope.sellect_all = false; // 全选按钮是否选中
$scope.invert_all = false; // 反选按钮是否选中
// 全选功能
$scope.BillSelectAll = function($event, list) {
console.log("list{}", list)
// 因为绑定的 sellect_all 有滞后,所以让其等于 $event.target.checked
$scope.sellect_all = $event.target.checked;
if ($scope.sellect_all) {
alert("全选")
angular.forEach(list, function(value) {
console.log("cc",value)
$scope.selectIds.push(value.bId);
$scope.select_one[value.bId] = true;
})
console.log($scope.select_one)
} else {
alert("全不选")
// 实现全不选功能
$scope.selectIds=[];
$scope.select_one=[];
}
}
// 检查是否全选
checkAll = function() {
console.log("selectIds{}",$scope.selectIds)
console.log("list{}",$scope.list)
// 如果按钮已全部被选,就使全选按钮选中,之所以进行非0判断,是考虑到了在实际环境中数据是服务器响应的。
if ($scope.selectIds.length != 0 && $scope.list.length == $scope.selectIds.length) {
$scope.sellect_all = true;
} else {
// 如果有的按钮没有被选中,就取消全选
$scope.sellect_all = false;
}
}
//获取选中的id放入这个数组中
$scope.selectIds=[];
$scope.updateSelection=function ($event,id) {
if ($event.target.checked){
$scope.selectIds.push(id)
}else {
// 3
var idx=$scope.selectIds.indexOf(id);
//3个参数 如果写2个参数是从当前删除几个
$scope.selectIds.splice(idx,1);
}
checkAll();
}
这个就是上述代码,可以忽略!
3、全选/全不选效果展示
AngularJS下拉框
1、HTML页面
ng-model:表示双向绑定的数据,这个根据你自己的修改
<td class="field">是否付款:</td>
<td>
<select class="form-control" ng-model="entity.bStatus" ng-options="item.id as item.text for item in sexTemplate"></select>
</td>
2、controller.js
//这是模拟的数据,你的是从后台传过来的数据,当然,如果是[男,女] 这种少量的,可以直接写死
$scope.sexTemplate=[{"id":0,"text":"未付款"},{"id":1,"text":"已付款"}]
3、下拉框效果展示
AngularJS单选框
1、HTML页面
注:
因为,就两个选择所以,我也是写思的,而你如果多的话,还是后台查询!
<tr>
<td class="field">用户权限:</td>
<td>
<input type="radio" ng-value=0 ng-model="entity.uSuper" name="auth">管理員
<input type="radio" ng-value=1 ng-model="entity.uSuper" name="auth">经理
</td>
</tr>