angularjs checkbox ng-checked not working

Question

I have the following code :-

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" ng-init="init()">
  <div class="container" style="width:400px">
    <div class="panel panel-default">
      <div class="panel-body">
        <form>
            <div class="form-group">
              <label for="selectedBasket">Select basket :</label>
              <select id="selectedBasket" class="form-control" ng-model="selectedBasket" ng-options="b.name for b in baskets">
              </select>
            </div>
            <div ng-repeat="f in fruits" class="checkbox">
              <label>
                <input type="checkbox" value="" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">
                  {{ f }}
              </label>
            </div>
        </form>     
      </div>
    </div>
  </div>

  <script>
  var app = angular.module('app', []);
  app.controller('ctrl', function($scope) {
    $scope.init = function() {
      $scope.baskets = [{'name': 'mary', 'items': ['apple', 'orange']}, {'name': 'jane', 'items': ['banana']}];
      $scope.fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon'];
      $scope.selectedBasket = null;
    };
  });
  </script>
</body>
</html>

if I select Mary or Jane, I can correctly see the correct items in their basket checked. However if I manually check all the fruits and then look at Mary or Jane, it doesn't exclude the items that are not in their baskets. Why is ng-checked failing?

Bonus question, is it best practise to set selectedBasket to null and checking for null in a directive assuming I want nothing as a default value, is there a better way?

ThibaudL · Accepted Answer · 2015-08-19T13:37:03.707

1

You've got no ng-model in your checkbox so your manual action isn't registered anywhere.
ng-checked is only used to make a 'slave' checkbox it can take no manual action. My guess is you should use a ng-model initialized to your ng-check value instead of using a ng-checked.

If you want to keep your ng-checked what you can do is :

<input type="checkbox" ng-click="selectedBasket.items.push(f)" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">

in fact it's still wrong... must be tired, use a toogle function in your ng-click which add or remove the item should be better...

edited Aug 19 '15 at 13:37

answered Aug 19 '15 at 13:12

ThibaudL

999
9
16

I know, but the point is why is ng-checked failing? if i switch to a new basket shouldn't it look at the items and determine the check based on whether the item is in the basket or not? it appears to work if the item is in the basket but not when the item isnt in basket. – mfc Aug 19 '15 at 13:16
just checked the docs, apparently ng-checked should not be used with ng-model https://docs.angularjs.org/api/ng/directive/ngChecked so thats not the answer – mfc Aug 19 '15 at 13:23
Yes because a forgot a word which was "instead" of ng-checked. – ThibaudL Aug 19 '15 at 13:34
Fact is, you'r not making any action to your model when you click, and it must ruined the inner working of the ng-checked. If you want to keep your ng-checked what you can do is : – ThibaudL Aug 19 '15 at 13:35

score 0 · Answer 2 · answered Feb 12 '17 at 07:53

Had the same problem with ng-check, tried everything but nothing worked. I wanted to control the number of checked Items when clicked to 2, so I used the $Event sent with ng-click and disable it.

Here is a sample code:

 <input type="checkbox" ng-click="toggleCheck($event, product._id);"
  ng-checked="isChecked(product._id)">

   $scope.toggleCheck($event, productId){
        if ( $scope.featuredProducts.indexOf(productId) === -1) {
            if ($scope.featuredProducts.length < 2) {
                $scope.featuredProducts.push(productId);
            }else {
                $event.preventDefault();
                $event.stopPropagation();
            }
        } else {
             $scope.featuredProducts.splice( $scope.featuredProducts.indexOf(productId), 1);
        }
    }

    $scope.isChecked(productId){
        return ($scope.featuredProducts.indexOf(productId) !== -1);
    }

angularjs checkbox ng-checked not working

2 Answers2