angularJS全选，全不选，下拉框，单选

悠悠 2023-10-15 13:21 37阅读 0赞

## 简介环境 ##

这个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();
        }

**这个就是上述代码，可以忽略！**

![aa26edffb5a646299c62dad7b89db97f.png][]

### 3、全选/全不选效果展示 ###

### ![177cc3346c434107b323256054cb6530.png][] ###

![18f4b6b92714417c9351b53a53e2dcc1.png][]

## AngularJS下拉框 ##

### 1、HTML页面 ###

**ng-model**:表示双向绑定的数据，这个根据你自己的修改

### 2、controller.js ###

//这是模拟的数据，你的是从后台传过来的数据，当然，如果是[男，女] 这种少量的，可以直接写死
     $scope.sexTemplate=[{"id":0,"text":"未付款"},{"id":1,"text":"已付款"}]

### 3、下拉框效果展示 ###

![71820a7eb48249cdb764ae0d0a43a6d7.png][]

## AngularJS单选框 ##

### 1、HTML页面 ###

注：

因为，就两个选择所以，我也是写思的，而你如果多的话，还是后台查询！

### 2、展示效果 ###

![4d52d900e9d94e9683e6cafb331f5126.png][]

[aa26edffb5a646299c62dad7b89db97f.png]: https://img-blog.csdnimg.cn/aa26edffb5a646299c62dad7b89db97f.png
[177cc3346c434107b323256054cb6530.png]: https://img-blog.csdnimg.cn/177cc3346c434107b323256054cb6530.png
[18f4b6b92714417c9351b53a53e2dcc1.png]: https://img-blog.csdnimg.cn/18f4b6b92714417c9351b53a53e2dcc1.png
[71820a7eb48249cdb764ae0d0a43a6d7.png]: https://img-blog.csdnimg.cn/71820a7eb48249cdb764ae0d0a43a6d7.png
[4d52d900e9d94e9683e6cafb331f5126.png]: https://img-blog.csdnimg.cn/4d52d900e9d94e9683e6cafb331f5126.png