How to bind ng-model to ng-check box

Question

I have a problem with binding Angular ng-check to ng-model, i.e. ng-model does not recognize the selected state of my flags.

Here is a description (its a much larger code base, but I'm considering minimizing the code).

When loading a page in JavaScript, I initialize my products and set default values:

$scope.products = {} $scope.SetProductsData = function() { var allProducts; allProducts = [ { id: 1, name: "Book", selected: true }, { id: 2, name: "Toy", selected: true }, { id: 3, name: "Phone", selected: true }] 

I have a main control that displays a check box for each of the three products (book, toy and phone): they are checked by default

 <div style="float:left" ng-init="allProducts.products = {}" > <div ng-repeat="p in Data.products"> <div style="font-size: smaller"> <label><input id="divPlatorm" ng-model="products[p.name]" ng-init="products[p.name] = true" type="checkbox"/> {{p.name}}</label> </div> </div> </div> 

Then a table in which the same products are repeated in rows:

 <div ng-repeat="line in lineProducts" ng-init="line.products = {}"> <div id="sc-p-enc" ng-repeat="p in Data.products"> <div id="sc-p-plat" style="font-size: smaller"> <label id="pl-label"><input ng-checked="products[p.name]" ng-model="line.products[p.name]" ng-init="line.products[p.name] = true" type="checkbox"/> {{p.name}}</label> </div> </div> </div> 

When I check / uncheck the boxes for the master products, the corresponding flags change in the lines. So if I have 100 lines with (Book, Toy and Phone), an untested Toy, I can see where all the toys are not marked in the lines.

When I send data to the controller, I still see all the toys = true, even if they were not marked.

If I physically go to the line, then uncheck each toy and send the data to my controller Toys = False.

How can I change selected flags if they are controlled using the main flags?

I followed the post found here, but I don't think this applies to my scenario: AngularJS: ng model not bound to flags ng-check for flags

Answer 1

It seems that the ng-checked in the table is bound to products[p.name] , which the ng-model in your main control is also present in the view. But the ng-model in your table binds to another property, line.products[p.name] .

I think you probably don't need ng-checked in the table, since each element has its own ng-model . Thus, you can change the appearance of the table to

 <label id="pl-label"><input ng-model="line.products[p.name]" type="checkbox"/>{{p.name}}</label> 

and in the controller, change the corresponding line.products[p.name] value each time the products[p.name] value changes.

Answer 2

I just solved this problem myself using "ng-init" and "ng-checked" ---

• ng-checked - 'checked' flag when the form was loaded
• ng-init- linked my html checkbox value attribute to the model

There is a comment above stating that it is not good to use ng-init this way, but no other solution has been provided.

Here is an example of using ng-select instead of ng-checked:

 <select ng-model="formData.country"> <option value="US" ng-init="formData.country='US'" ng-selected="true">United States</option> </select> 

This binds "US" to the formData.country model and selects the value to load the page.

Answer 3

If I understand the functionality you are trying to cover, fiddle can help you. Here is the code:

 <div style="float:left" ng-app ng-init="products = [ { id: 1, name: 'Book', line: 'Books', selected: true }, { id: 2, name: 'Another Book', line: 'Books', selected: true }, { id: 3, name: 'Toy', line: 'Toys', selected: false }, { id: 4, name: 'Another Toy', line: 'Toys', selected: false }, { id: 5, name: 'Phone', selected: true }];lineProducts = ['Toys', 'Books']" > <div style="float:left"> <div ng-repeat="p in products"> <div style="font-size: smaller"> <label> <input ng-model="p.selected" type="checkbox"/> {{p.name}} </label> </div> </div> </div> <div ng-repeat="line in lineProducts"> {{line}} <div ng-repeat="p in products | filter:line"> <div style="font-size: smaller"> <label> <input ng-model="p.selected" type="checkbox"/> {{p.name}} </label> </div> </div> </div> </div> 

And why do you have identifiers in your html? With angular, Ides is not necessary, and given that they are inside ng-repeats, they will be ambiguous and therefore useless.

I also agree with Nikos in using ng-init. I used it in my jsfiddle, because I'm lazy, I would not use it in production code

Answer 4

You should use an ng model that will provide you with two-way binding. Checking and removing the value will update the product.selected value

 <input type="checkbox" ng-model="p.selected"/>