如果我檢查所有複選框，選擇所有複選框應自動檢查，反之亦然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

回答

相關問題