Angularjs 如何将ng模型绑定到ng复选框

将Angular ng check绑定到ng model时遇到问题，即ng model无法识别复选框的选定状态

下面是一个描述（这是一个更大的代码库，但我已经对代码进行了裁剪以最小化代码）

在JavaScript页面加载时，我初始化我的产品并设置默认值：

$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
      }]

我的视图中有一个主控件，它为每3种产品（书籍、玩具和手机）列出一个复选框：默认情况下，这些都是选中的

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

{{p.name}}

然后是一个表，该表具有重复的行中相同的产品：

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

{{p.name}}

当我选中/取消选中主产品时，行中相应的复选框会更改。因此，如果我有100行（书，玩具和电话）未检查的玩具，我可以看到所有的玩具都未检查的行

当我将数据发送到控制器时，我仍然可以看到所有玩具=真，即使它们未被选中

如果我实际转到该行，则取消选中每个玩具并将数据发送到我的控制器Toys=False

当从主复选框进行控制时，如何使复选框的选定状态发生更改

我遵循了这里的帖子，但我认为这不适用于我的场景：

---

表中选中的

ng

似乎绑定到了

产品[p.name]

，视图中主控件中的

ng模型也绑定到了该产品。但是表中的
ng模型
绑定到另一个属性，
line.products[p.name]

我认为您可能不需要在表中勾选
ng
，因为每个项目都有自己的
ng模型。因此，您可以将表视图更改为

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

{{p.name}

在控制器中，每次更改
products[p.name]
的值时，都更改
line.products[p.name]
的相应值。
如果我了解您试图介绍的功能，以下内容可能会对您有所帮助。代码如下：

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


{{p.name}}
{{line}}
{{p.name}}

还有，为什么在html中有ID？有了angular，就不需要ID了，而且考虑到它们在ng重复序列中，它们将是不明确的，因此无论如何都是无用的

我也同意Nikos关于ng init的用法。我在JSFIDLE中使用它是因为我很懒，我不会在生产代码中使用它
我只是通过使用“ng init”和“ng checked”自己解决了这个问题--


ng选中-“选中”窗体加载时的复选框
ng init-将我的复选框html值属性绑定到模型

上面有一条评论指出，以这种方式使用nginit并不好，但没有提供其他解决方案

以下是使用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”绑定到model formData.country，并选择页面加载上的值。
您应该在那里使用ng model，它将为您提供双向绑定。选中并取消选中该值将更新product.selected的值

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


缺少部分代码。拉一把小提琴/敲一下会有帮助。除此之外：您在
ng repeat
中重用ID；这将导致文档中有许多具有相同id的元素。您正在广泛使用
nginit
。我相信
ng init
会在视图中插入过程逻辑，这通常不是最佳做法。如果我删除了选中的ng，则复选框不会在表中更改。虽然有点晚，但您应该能够添加
$scope.formData.country='US'以执行相同的功能。