CODEWITHSUNDEEP
angularjscheckboxangularjs-ng-repeat
Dmitrij Burlaj
Dmitrij Burlaj

Reputation: 55

AngularJS: uncheck checkboxes with no ng-model attribute

I want to uncheck all checkboxes when press some button. I need to do this on AngularJS (no jQuery). My checkboxes don't have ng-model attribute. How I can uncheck them? My HTML structure:

    <li ng-repeat="channel in channelsList">
         <div class="checkbox">
             <label><input type="checkbox" value="" ng-click="isChecked(channel.id)">
                <img src="images/checkbox-unchecked.png" alt="" class="unchecked">
                <img src="images/checkbox.png" alt="" class="checked"><span>{{channel.name}}</span>
             </label>
         </div>
    </li>

My channelsList is only an array of objects with 2 properties: id and name.

Thanks for helping!

Upvotes: 0

Views: 6553

Answers (4)

Art
Art

Reputation: 1

Just use ng-click and ng-checked attributes.

Upvotes: 0

Stephane Janicaud
Stephane Janicaud

Reputation: 3627

Bind checkbox ng-model to a _selected property. Please note that I use _selected and not selected in case your API would in a near future return a selected property that would collide with this one.

index.html

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="SampleController">

    <ul>
        <li ng-repeat="channel in channelsList">
             <input type="checkbox" ng-model="channel._selected" /> {{channel.name}} (id={{channel.id}})
        </li>
    </ul>
    <button ng-click="uncheckAll()">Uncheck all</button>

</body>
</html>

script.js

angular.module('app', []);

angular.module('app').controller('SampleController', function ($scope) {

    $scope.channelsList = [
     {id: 'c1', name: 'CNN'}, 
     {id: 'c2', name: 'BBC'},
     {id: 'c3', name: 'Discovery Channel'}
    ];

    $scope.uncheckAll = function() {
        angular.forEach($scope.channelsList, function (channel) {
            channel._selected = false;
        });
    };
});

Here is the plunker : http://plnkr.co/edit/VPOjKMUVyrMpPfT9jLz3

Upvotes: 0

chrmcpn
chrmcpn

Reputation: 624

I don't know exactly what you need but supposing you have an array of ids telling the ids checked like this:

$scope.channelsList = [
    {'id' : 1, 'name' : 'foo' },
    {'id' : 2, 'name' : 'bar' },
    {'id' : 3, 'name' : 'foo' }
  ];
  var checked = [1, 3]


  $scope.isChecked = function(id){
    return checked.indexOf(id) >= 0;
  };

You can put a button like:

<button ng-click="uncheckAll()">click</button>

And use it to clear your array:

 $scope.uncheckAll = function(){
    checked = [];
  }

Upvotes: 0

Robert I
Robert I

Reputation: 1527

Two ng-ifs

If you really want to avoid ng-model you could achieve the same effect with... notice the checked attribute

<li ng-repeat="channel in channelsList">
         <div class="checkbox">
             <label>
                <input ng-if="isChecked(channel.id);" type="checkbox" checked ng-click="check(channel.id);">
                <input ng-if="!isChecked(channel.id);" type="checkbox" ng-click="check(channel.id);">
                <img src="images/checkbox-unchecked.png" alt="" class="unchecked">
                <img src="images/checkbox.png" alt="" class="checked"><span>{{channel.name}}</span>
             </label>
         </div>
</li>

Upvotes: 1

Related Questions