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-19 13:37:03Z

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, 2015 at 13:37

answered Aug 19, 2015 at 13:12

ThibaudL

1,0099 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mfc Over a year ago

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 Over a year ago

just checked the docs, apparently ng-checked should not be used with ng-model docs.angularjs.org/api/ng/directive/ngChecked so thats not the answer

ThibaudL Over a year ago

Yes because a forgot a word which was "instead" of ng-checked.

ThibaudL Over a year ago

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 : <input type="checkbox" ng-click="selectedBasket.items.push(f)" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">

ramon22 · Accepted Answer · 2017-02-12 07:53:32Z

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);
    }

Collectives™ on Stack Overflow

angularjs checkbox ng-checked not working

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related