angularJS select all, do not select all, drop-down box, radio selection

Introduction environment

This AngularJS was used when I was writing a project. I found it quite good, so I would like to share how to use angularjs to implement all selection, none selection, drop-down box, and radio selection.

AngularJS select all/unselect all

1. In HTML page

I will display the page first, mainly to look at the attributes in the select all button and the data in the traversed selection box.

The data in the attributes of these two buttons corresponds to the methods in controller.js. First copy controller.js to your project, and you can understand it by stroking the logic.


        //这个是全选按钮
      <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>&nbsp;

2. In controller.js

Precautions:

$scope.list : stores the collection data queried from the background . In this article, I customizedthe background data to simulate

// 自定义数据列表 我是自定义了一个集合，你是通过后台查回来的数据！！！！！

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

This is the above code and can be ignored!

3. Select all/unselect all effect display

AngularJS dropdown box

1. HTML page

ng-model : represents two-way binding data, this is based on your own modifications

<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. Drop-down box effect display

AngularJS radio button

1. HTML page

Note:

Because there are only two choices, I also write my thoughts, and if you have more, you can still query in the background!

<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>