7

I am having a problem binding Angular ng-check to ng-model, that is ng-model does do not recognize the selected state of my check boxes.

Here is a description(Its a much larger code base but I have tailored to minimize code).

On page load in JavaScript I initialize my products and set the 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 master control in my view that list a check box for each 3 products(Book,Toy and phone):These 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 that have the same products 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/unchecked the master products the corresponding check boxes changes in the rows. So if I have 100 rows with (Book,Toy and phone) the unchecked Toy I can see where all toys are unchecked in the rows.

When I send the data to my controller I can still see all Toys = true even though they were unchecked.

If I physically go to the row then unchecked each toy and send the data to my controller Toys = False.

How can I get the check boxes selected state to change when controlled from the master check-boxes?

I have followed the post found here but I dont think this applies to my scenario: AngularJS: ng-model not binding to ng-checked for checkboxes

4

4 回答 4

5

似乎ng-checked表中的 绑定到products[p.name]，ng-model视图中的主控件中的 也绑定到。但是ng-model你表中的 绑定到另一个属性，line.products[p.name].

我认为您可能不需要ng-checked在表格中，因为每个项目都有自己的ng-model. 因此，您可以将表格视图更改为

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

并且在控制器中，line.products[p.name]每次改变 的值时改变对应的值products[p.name]。

于 2013-10-02T18:07:08.577 回答
2

我刚刚通过使用“ng-init”和“ng-checked”自己解决了这个问题---

  • ng-checked - 在表单加载时“选中”复选框
  • ng-init- 将我的复选框 html 值属性绑定到模型

上面有评论指出以这种方式使用 ng-init 不好，但没有提供其他解决方案。

这是一个使用 ng-select 而不是 ng-checked 的示例：

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

这将“US”绑定到模型 formData.country 并在页面加载时选择值。

于 2015-01-29T13:52:36.197 回答
0

如果我了解您试图涵盖以下小提琴的功能可能会对您有所帮助。这是代码：

<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>

另外，为什么您的 html 中有 id？有了角度，就不需要 id，并且考虑到它们在 ng-repeats 中，它们将是模棱两可的，因此无论如何都没用。

我也同意 Nikos 关于 ng-init 的使用。我在我的jsfiddle中使用它是因为我很懒，我不会在生产代码中使用它

于 2013-10-02T18:12:15.503 回答
0

您应该在那里使用 ng-model ，它可以为您提供两种方式的绑定。选中和取消选中该值将更新 product.selected 的值

<input type="checkbox" ng-model="p.selected"/>
于 2017-09-27T09:45:06.450 回答