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

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

我在我的视图中有一个主控件,列出了每个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>

然后在行中重复具有相同产品的表:

<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不绑定到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].