ng-modelをng-checkedボックスにバインドする方法

Question

ng-modelにng-checkをバインドする際に問題があります。つまり、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が表示されます。

私が物理的に行に行くと、各おもちゃのチェックを外し、私のコントローラートイ= 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-modelを持っているので、あなたはおそらく、テーブルにng-checkedを必要としないと思います。だから、

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

およびコントローラであなたのテーブルビューを変更するline.products[p.name]products[p.name]の値が変更されるたびに、対応する値を変更する場合があります。

Answer 2

私はあなたを助けるかもしれない次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にidsがありますか？角張った状態では、IDの必要はなく、それらがngリピートの内側にあることを考慮すると、あいまいであるため、とにかく役に立たないでしょう。

また、Nikosはng-initの使用について同意します。私は怠け者ですので、私はちょうど使用することで、この問題を自分で解決

Answer 3

生産コードでそれを使用することはありません、私のjsfiddleでそれを使用して「NG-INIT」---と「NG-確認」

• ngを-確認 - フォームが
• NG-INIT-はその良いではないが、使用することを示す上記のコメントはありモデル

に私のチェックボックスのHTML value属性をバインドロードされたとして、チェックボックス「をチェックし」NGこのようにして、他の解決法は提供されなかった。

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

これはformData.countryをモデル化するために、 "米国" を結合し、ページロードの値を選択：

はここでngの選択の代わりに、NG-チェックを使用した例です。

Answer 4

そこにng-modelを使用して、双方向バインディングを提供する必要があります。値をチェックしてチェックを外すと、product.selectedの値が更新されます

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