javascriptangularjscheckboxangularjs-ng-repeatangularjs-ng-checked

AngularJS - Checkbox cheked with ng-click after i checked with select all it check all but Clearing all is not clears all

AngularJS - Checkbox cheked with ng-click after I checked with select all, it check all, but Clearing all is not clears all

I have a list of objects in and Json array. I have declared the checkboxes with ng-repeat but when i check one and more checkboxes - one by one it selects the checkbox and after that if I choose the part to select all, for check all checkboxes, with select all button, it selects all also. But after i want to unselect all, the array has no objects its true. But visualisation of checkbox is still checked why? Can anyone help me on this?

Here is the part of my coding about checkboxes

     var app = angular.module('myApp', []);
     app.controller('companyCtrl', ['$scope',
         function($scope) {
           $scope.addCompany = function(cmpid) {
             $scope.form.companies.push(cmpid);
           };
           $scope.Companies = [{
             "id": "001",
             "name": "Company1",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "002",
             "name": "Company2",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "003",
             "name": "Company3",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "004",
             "name": "Company4",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "005",
             "name": "Company5",
             "address": "Bla bla street, Somewhere City, Some Country"
           }, {
             "id": "006",
             "name": "Company6",
             "address": "Bla bla street, Somewhere City, Some Country"
           }];
           $scope.checkAll = function() {

             $scope.form.companies.splice(0, $scope.form.companies.length);
             $scope.all = true;
             for (var i in $scope.Companies) {
               $scope.addCompany($scope.Companies[i].id);
             }
             console.log($scope.form.companies);
           };

           $scope.uncheckAll = function() {
             $scope.form.companies.splice(0, $scope.form.companies.length);
             $scope.all = false;
             for (var i in $scope.Companies) {
               $scope.addCompany('');
             }

             console.log($scope.form.companies);

           };
         )
       ]
     };
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="myApp">
  <div>
    <a href="#" ng-click="checkAll()">Select All</a>
    <a href="#" ng-click="uncheckAll()">Clear All</a>
  </div>
  <ul>
    <li ng-repeat="cmp in Companies">
      <div ng-if="cmp">
        <input id="{{'company-'+ $index}}" type="checkbox" ng-model="cmp.Selected" ng-click="addCompany(cmp.id)" ng-value="cmp.id" ng-checked="all || cmp.Selected" />
        <label for="{{'company-'+$index}}">
          <div class="title">{{cmp.name}}</div>
        </label>
      </div>
    </li>
  </ul>
</body>

</html>

Solution

  • Resolved. I have changed the uncheck-all function's for loop to angular forEach than that fixed my problem with little changing on addCompany() function also;

    $scope.checkAll = function() {
        $scope.form.companies.splice(0, $scope.form.companies.length);
        $scope.all = true;
        angular.forEach($scope.Companies, function (cmp) {
          cmp.Selected = $scope.all;
          $scope.addCompany(cmp.id);
        });
};

$scope.uncheckAll = function() {
        $scope.form.companies.splice(0, $scope.form.companies.length);
        $scope.all = false;
        angular.forEach($scope.Companies, function (cmp) {
            cmp.Selected = $scope.all;
            $scope.addCompany('');
        });
        console.log($scope.form.companies);
    };

    also updated the addCompany() function with following;

    $scope.addCompany = function (cmpid){
    $scope.latestCompanies =
    {
       "id": cmpid,
    };
    if(cmpid === '' || cmpid === null){
      $scope.form.companies= [];
      console.log(JSON.stringify($scope.form));
    }else {
      $scope.form.companies.push($scope.latestCompanies);
    }

  };

    Thank you also @keklikhasan reminds me to use forEach