如何將ng模型綁定到ng檢查框

我遇到了一個問題，即綁定Angular ng檢查到ng模型，即ng模型不能識別我的複選框的選中狀態。如何將ng模型綁定到ng檢查框

這裏是一個描述（它是一個更大的代碼庫，但我已經量身定製以最小化代碼）。

在頁面加載在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 = False。

如何從主複選框控制時如何獲取複選框選中狀態更改？

我也跟着在這裏找到了職位，但我不認爲這也適用於我的方案： AngularJS: ng-model not binding to ng-checked for checkboxes

來源

2013-10-02 Milligran

有部分代碼缺失。小提琴/笨蛋會有所幫助。除此之外：你正在'ng-repeat'內重用ID;它會導致文檔中具有相同標識的許多元素。你正在廣泛使用'ng-init'。我認爲'ng-init'在視圖中插入了程序邏輯，這通常不是最佳實踐。 –

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

，並在控制器，改變每一個的products[p.name]值發生改變時line.products[p.name]相應的值。

來源

2013-10-02 18:07:08

如果我刪除了ng-checked，表格中的複選框不會改變 – Milligran

如果我理解您正在嘗試涵蓋的功能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重複中，它們將是模糊的，因此無論如何都是無用的。

我也同意Nikos關於ng-init的使用。我用它在我的jsfiddle因爲我懶，我也不會在生產代碼

來源

2013-10-02 18:12:15 mfeingold

我只是使用解決了這個問題，我自己使用它「NG-初始化」和「NG-檢查」 ---

NG-檢查 - 「檢查」的形式加載
NG-INIT-束縛我的複選框HTML值屬性模型

上面有說明，它不好用註釋的複選框NG以這種方式，但沒有提供其他解決方案。

下面是使用納克選代替NG覈對的例子：

<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-29 13:52:36

這有點晚，但您應該可以在控制器中添加'$ scope.formData.country ='US';'以執行相同的功能。 –

你應該在那裏使用ng-model，它會爲你提供雙向綁定。檢查並取消選中該值會更新product.selected的值

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

來源

2017-09-27 09:45:06

如何將ng模型綁定到ng檢查框

回答

相關問題