Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
642 views
in Technique[技术] by (71.8m points)

html - select all checkboxes with angular JS

I am trying to select all checkboxes with one single checkbox. But how to do that?

This is my HTML:

    <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />

<!-- userlist --> 
    <!--<div id="scrollArea" ng-controller="ScrollController">-->
    <table class="table">
      <tr>
          <th>User ID</th>
          <th>User Name</th>
          <th>Select</th>    
     </tr>
     <tr ng-repeat="user in users | filter:search">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select"></td>
        <td><tt>{{user.select}}</tt><br/></td>
     </tr>
    </table>

I create an extra checkbox to selecet and unselect all checkboxes.

JS:

.controller('UsersCtrl', function($scope, $http){
    $http.get('users.json').then(function(usersResponse) {
      $scope.users = usersResponse.data;
    });

      $scope.checkAll = function () {
            angular.forEach($scope.users, function (user) {
                user.select = true;
                });
            };  
 });

I tried this too, but none of them works for me :(

  $scope.checkAll = function () {
        angular.forEach($scope.users, function (user) {
            user.select = $scope.selectAll;
        });
    };  
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You are missed the container divs with ng-controller and ng-app and angular.module.

user.select = $scope.selectAll is the correct variant.

https://jsfiddle.net/0vb4gapj/1/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...