Angularjs:选中所有复选框以删除多个用户

时间:2015-06-18 05:22:25

标签: angularjs

我想实施全选复选框(用于多次删除)。 我已经尝试了Plunker中给出的代码。它给出了以下错误

 `Unknown provider: $elementProvider <- $element <- allUsersCtrl`

你能提供任何解决方案,或者说明我出错的地方! 这是脚本:

var angularControllers = angular.module('angularControllers', ['flash']);  
angularControllers.controller('allUsersCtrl', ['$scope','$http','$element', function($scope,$http,$element){
// $scope.allUsers contains users
//delete multiple
      $scope.arrayToPost = [];
      $scope.checkedAll = false;
      angular.forEach($scope.allUsers, function(user) {
        user["checked"] = false;
        });

        $scope.toggleCheckAll = function() {
       if($scope.checkedAll) {
         angular.forEach($scope.allUsers, function(user) {
           user.checked = true
            $scope.modifyArrayToPost(user);
         });
       }
       else {
         angular.forEach($scope.allUsers, function(user) {
           user.checked = false;
            $scope.modifyArrayToPost(user);
         });
       }

     }

      $scope.modifyArrayToPost = function(user) {
       if(user.checked && $scope.arrayToPost.indexOf(user.user_id) == -1){
         $scope.arrayToPost.push(user.user_id);
       }
       else if(!user.checked) {
         $scope.arrayToPost.splice($scope.arrayToPost.indexOf(user.user_id), 1);
       }
     }

      $scope.$watch('allUsers', function() {
       var allSet = true;
       var allClear = true;
       angular.forEach($scope.allUsers, function(user) {
          if (user.checked) {
            allClear = false;
          } else {
            allSet = false;
          }         
       });

       var checkAll = $element.find('#all');
       checkAll.prop('indeterminate', false);
       if (allSet) {
          $scope.checkedAll = true;
       } else if (allClear) {
          $scope.checkedAll = false;
       } else {
          $scope.checkedAll = false;
          checkAll.prop('indeterminate', true);
       }
     }, true);

        $scope.testFunction=function(params)
        {
        console.log(params);
            $http.post("../admin/users/testFunction",{'params' : params}) 
                .success(function (data, status, headers, config) 
                { 
                console.log(data);
                }) 
                .error(function(data, status, headers, config){

                });
        }

}]); //allUsersCtrl

这是观点:

<form  action="" method="post" name="myform" />
     <input type="checkbox" name="chk_all"  ng-model="checkedAll" id="all"  ng-change="toggleCheckAll()" /> Select All
    <table class="table table-striped table-bordered table-hover">  
        <tr ng-repeat="user in allUsers">
        <td><input type="checkbox" ng-model="user.checked"  class="chk_all" value="{{user.id}}" ng-change="modifyArrayToPost(user)"  /></td>
        </tr>   
    </table>
<input type="submit" value="test" ng-click="testFunction(arrayToPost)"/>
 <tt>array: {{arrayToPost}}</tt>
</form>

我想在按钮点击时删除所选用户。请帮忙。

1 个答案:

答案 0 :(得分:0)

解决。 @Guinn:嗨,Guinn,我成功了!我用过你的代码 但只做了一些小改动:从模块中移除$element,从各处移除。并直接使用angular.element

$element移除后影响了两行:

var checkAll=angular.element.find('#all');
$(checkAll).prop('indeterminate', false);`

此链接有助于:https://docs.angularjs.org/api/ng/function/angular.element