angularJS すべて選択、すべて選択しない、ドロップダウン ボックス、ラジオ選択

導入環境

この AngularJS はプロジェクトを書くときに使用したのですが、とても良かったので、angularjs を使って全選択、なし選択、ドロップダウン ボックス、ラジオ選択を実装する方法を共有したいと思います。

AngularJS すべて選択/すべて選択解除

1. HTMLページ内

最初にページを表示して、主に「すべて選択」ボタンの属性と、走査された選択ボックスのデータを確認します。    

この 2 つのボタンの属性のデータは、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>&nbsp;

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、コントローラー.js

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

3. ドロップダウンボックスの効果表示

 AngularJS ラジオ ボタン

1. HTMLページ

注記：

選択肢が 2 つしかないので、私の考えも書きます。さらに選択肢がある場合は、バックグラウンドでクエリを実行できます。

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

2. ディスプレイ効果