Question

我在将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
      }]

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

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

然后在行中重复使用相同产品的表：

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

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

当我将数据发送到我的控制器时，我仍然可以看到所有Toys = true，即使它们未经检查。

如果我亲自前往该行，则取消选中每个玩具并将数据发送到我的控制器Toys = False。

如何从主复选框控制复选框选中状态以进行更改？

我已按照此处找到的帖子进行操作，但我不认为这适用于我的方案： AngularJS: ng-model not binding to ng-checked for checkboxes

Answer 1

表中的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]的值时，都会更改{{1}}的相应值。

Answer 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模型并选择页面加载时的值。

Answer 3

如果我了解您尝试涵盖以下fiddle的功能，可能会对您有所帮助。这是代码：

<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中使用它因为我很懒，我不会在生产代码中使用它

Answer 4

你应该在那里使用ng-model，为你提供双向绑定。选中和取消选中该值将更新product.selected

的值

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

如何将ng-model绑定到ng-checked框

4 个答案: