而在angularjs选择checkall

而在angularjs选择checkall

本文介绍了触发所有的复选框事件,而在angularjs选择checkall的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 <表类=表>
<&THEAD GT;
            <第i个<输入类型=复选框名称='全选'NG模型=值1NG点击=全选()>< /第i
            <第i个名称和LT; /第i
        < / THEAD>
        < TR NG重复=X中的项目>
            < TD><输入类型=复选框NG模型=值2NG-真值=YESNG-假值=NONG点击=选择($事件,x.id )
                            />< / TD>
            &所述; TD> {{x.name}}&下; / TD>
            < / TR>
        < / TR>
    < /表>

如何,我得到当我点击所有item.id全选()复选框?

另外,您能否提供我要NG重复复选框合适NG-模型语法?

谢谢,
拉贾氏/ P>

解决方案

\r
\r

VAR的myapp = angular.module('应用',[]);\r
myapp.controller(Ctrl键,功能($范围){\r
  VAR VM =这一点;\r
    vm.data = {\r
      项目:\r
         {ID:1,名称:阿里,选择否},\r
         {ID:2,名称:礼,选择否},\r
         {ID:3,名称:阿米尔,选择否}\r
      ]\r
     };\r
  \r
  vm.value1 = FALSE;\r
  \r
  vm.selectAll =功能($事件){\r
     VAR复选框= $ event.target;\r
     变种选定=否;\r
         如果(checkbox.checked)\r
           {\r
           选=YES;\r
           }\r
    其他{\r
      选=否;\r
      }\r
    angular.forEach(vm.data.items,函数(项目){\r
             item.selected =选择;\r
             });\r
    \r
         \r
         \r
   \r
    }\r
});

\r

&LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
&LT; D​​IV NG-应用=应用程序NG控制器=Ctrl键VM&GT;\r
&LT;表类=表&GT;\r
&LT;&THEAD GT;\r
            &LT;第i个&LT;输入类型=复选框名称='全选'NG模型=值1NG点击=vm.selectAll($事件)&GT;&LT; /第i\r
            &LT;第i个所有&LT; /第i\r
        &LT; / THEAD&GT;\r
        &LT; TR NG重复=X在vm.data.items&GT;\r
            &LT; TD&GT;&LT;输入类型=复选框NG模型=vm.data.items [$指数] .selectedNG-真值=YESNG-假值=NONG-点击=vm.select($事件,x.id)\r
                            /&GT;&LT; / TD&GT;\r
            &所述; TD&GT; {{x.name}}&下; / TD&GT;\r
            \r
        &LT; / TR&GT;\r
    &LT; /表&gt;\r
\r
&LT; / DIV&GT;

\r

\r
\r

<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th>
            <th>  Name </th>
        </thead>
        <tr ng-repeat="x in items">
            <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>
            </tr>
        </tr>
    </table>

How to I get all the item.id when I click "selectall()" checkbox ?

Also, Can you suggest me appropriate ng-model syntax for ng-repeat checkbox ?

Thanks,Raja K

解决方案

var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
  var vm = this;
    vm.data = {
      items: [
         {id:1,name:"ali",selected: "NO"},
         {id:2,name:"reza",selected: "NO"},
         {id:3,name:"amir",selected: "NO"}
      ]
     };

  vm.value1 = false;

  vm.selectAll = function($event){
     var checkbox = $event.target;
     var selected = "NO";
         if(checkbox.checked)
           {
           selected = "YES";
           }
    else {
      selected = "NO";
      }
    angular.forEach(vm.data.items, function(item) {
             item.selected = selected;
             });




    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th>
            <th>  All </th>
        </thead>
        <tr ng-repeat="x in vm.data.items">
            <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>

        </tr>
    </table>

</div>

这篇关于触发所有的复选框事件,而在angularjs选择checkall的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 12:53