如果我检查所有复选框，选择所有复选框应自动检查，反之亦然AngularJS

如果我选中了全部复选框，那么所有复选框都会被检查。但是，当我单独检查每个复选框时，问题就会出现，选择所有复选框应该被自动检查，反之亦然。下面是代码：如果我检查所有复选框，选择所有复选框应自动检查，反之亦然AngularJS

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<body> 

    <p>Click the table headers to change the sorting order:</p> 

    <div ng-app="myApp" ng-controller="namesCtrl"> 
    <p> 
     <button type="button" ng-click="remove($index)">Delete Selected</button> 
    </p> 

    <table border="1" width="100%"> 
     <tr> 
     <th> 
      <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /> 
     </th> 
     <th></th> 
     <th>Sl no</th> 
     <th ng-click="orderByMe('name')">Name</th> 
     <th ng-click="orderByMe('country')">Country</th> 
     <th>Delete</th> 
     </tr> 
     <tr ng-repeat="x in names | orderBy:myOrderBy"> 
     <td> 
      <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" /> 
     </td> 
     <td>{{x.select}}</td> 
     <td>{{$index+1}}</td> 
     <td>{{x.name}}</td> 
     <td>{{x.country}}</td> 
     <td> 
      <button type="button" ng-click="Delete(x)">Delete</button> 
     </td> 
     </tr> 
    </table> 

    </div> 

    <script> 
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) { 
     $scope.names = [{ 
     name: 'Jani', 
     country: 'Norway' 
     }, { 
     name: 'Carl', 
     country: 'Sweden' 
     }, { 
     name: 'Margareth', 
     country: 'England' 
     }, { 
     name: 'Hege', 
     country: 'Norway' 
     }, { 
     name: 'Joe', 
     country: 'Denmark' 
     }, { 
     name: 'Gustav', 
     country: 'Sweden' 
     }, { 
     name: 'Birgit', 
     country: 'Denmark' 
     }, { 
     name: 'Mary', 
     country: 'England' 
     }, { 
     name: 'Kai', 
     country: 'Norway' 
     }]; 

     //for sorting the rows  
     $scope.orderByMe = function(x) { 
      $scope.myOrderBy = x; 
     } 
     //single row deletion 
     $scope.Delete = function(x) { 
     $scope.names.splice($scope.names.indexOf(x), 1); 
     }; 
     //selecting all checkboxes in the table 
     $scope.checkAll = function() { 
     angular.forEach($scope.names, function(x) { 
      x.select = $scope.selectAll; 
     }); 
     }; 
     //for selecting and deleting checked items 
     $scope.remove = function() { 
     $scope.names = filterFilter($scope.names, function(x) { 
      return !x.select; 
     }); 
     }; 

    }]); 
    </script> 

</body> 

</html>

这里是链接到plunker http://plnkr.co/edit/LFShX3PTEITLaN7fSElX?p=preview

谁能帮助吗？

来源

2017-05-04 neo.abi1000

您可以对您选择一个ng-checked所有复选框，如：

ng-checked="allChecked()"

其中allChecked是在控制器中的功能，找出是否所有的名字已被选中或不。喜欢的东西，

$scope.allChecked = function() { 
    return $scope.names.filter(obj => obj.select).length === $scope.names.length 
}

working example

编辑：如果没有箭头的功能，

$scope.allChecked = function() { 
    var selectedNames = $scope.names.filter(function(obj) { 
    return obj.select 
    }); 
    return selectedNames.length === $scope.names.length 
}

来源

2017-05-04 11:17:57 tanmay

我在eclipse中使用angularjs。所以在eclipse中使用“=>”符号显示错误。任何建议我可以做什么？ –

是的，其实昨天它没有工作。但今天，当我试图用这个符号工作。他们在月蚀中的任何问题。它显示该符号的错误，但工作正常。我在这里有另一个问题是链接http://stackoverflow.com/questions/43800095/while-editing-a-row-how-does-the-cancel-button-will-work-and-if-i-want-编辑 –

下面给出的代码可以帮助你。一旦您从最上面的复选框中选中或取消选中任何全部复选框，则您将完成代码检查全部。但是对于单独的复选框，您可以调用一个函数但不执行此函数。这是你的更新代码。

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<body> 

    <p>Click the table headers to change the sorting order:</p> 

    <div ng-app="myApp" ng-controller="namesCtrl"> 
    <p> 
     <button type="button" ng-click="remove($index)">Delete Selected</button> 
    </p> 

    <table border="1" width="100%"> 
     <tr> 
     <th> 
      <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /> 
     </th> 
     <th></th> 
     <th>Sl no</th> 
     <th ng-click="orderByMe('name')">Name</th> 
     <th ng-click="orderByMe('country')">Country</th> 
     <th>Delete</th> 
     </tr> 
     <tr ng-repeat="x in names | orderBy:myOrderBy"> 
     <td> 
      <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" /> 
     </td> 
     <td>{{x.select}}</td> 
     <td>{{$index+1}}</td> 
     <td>{{x.name}}</td> 
     <td>{{x.country}}</td> 
     <td> 
      <button type="button" ng-click="Delete(x)">Delete</button> 
     </td> 
     </tr> 
    </table> 

    </div> 

    <script> 
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) { 
     $scope.names = [{ 
     name: 'Jani', 
     country: 'Norway' 
     }, { 
     name: 'Carl', 
     country: 'Sweden' 
     }, { 
     name: 'Margareth', 
     country: 'England' 
     }, { 
     name: 'Hege', 
     country: 'Norway' 
     }, { 
     name: 'Joe', 
     country: 'Denmark' 
     }, { 
     name: 'Gustav', 
     country: 'Sweden' 
     }, { 
     name: 'Birgit', 
     country: 'Denmark' 
     }, { 
     name: 'Mary', 
     country: 'England' 
     }, { 
     name: 'Kai', 
     country: 'Norway' 
     }]; 

     //for sorting the rows  
     $scope.orderByMe = function(x) { 
      $scope.myOrderBy = x; 
     } 
     //single row deletion 
     $scope.Delete = function(x) { 
     $scope.names.splice($scope.names.indexOf(x), 1); 
     }; 
     //selecting all checkboxes in the table 
     $scope.checkAll = function() { 
     angular.forEach($scope.names, function(x) { 
      x.select = $scope.selectAll; 
     }); 
     }; 

     $scope.xsetting = function(x) { 
      $scope.selectAll = true; 
      angular.forEach($scope.names, function(v, k) { 
      if (!v.checked) { 
       $scope.selectAll = false; 
      } 
      }); 
     } 
     //for selecting and deleting checked items 
     $scope.remove = function() { 
     $scope.names = filterFilter($scope.names, function(x) { 
      return !x.select; 
     }); 
     }; 

    }]); 
    </script> 

</body> 

</html>

这是http://plnkr.co/edit/TmF4jFtRmFFKoYngSYpq?p=preview，它正在工作。

来源

2017-05-04 11:29:20

其实它是部分工作。当我检查所有个人复选框，然后选择所有复选框没有被选中，而如果我检查选择所有复选框，然后我取消选中一个，它的工作 –

你能告诉我你现在面临什么问题吗？ –

在上面提到的代码中，我使用=>符号。 –

如果我检查所有复选框，选择所有复选框应自动检查，反之亦然AngularJS

回答

相关问题