web-dev-qa-db-ja.com

AngularJS：ng-modelがチェックボックスのng-checkedにバインドされていません

この質問をする前にこれを参照しました。

AngularJsはng-checkedとng-modelをバインドしません

ng-checkedがtrue側でhtmlに評価される場合、ng-modelは更新されません。上記の質問で提案されているng-repeatはできません。チェックボックスごとにスタイルを設定する必要があるためです。

これが、私の問題を説明するために作成したプランカーです。

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

欲しいものを見るには、コンソールを開いてSubmitボタンをクリックしてください。チェックボックスをオンにしないでください。

前もって感謝します！

angularjsangularjs-ng-modelangularjs-ng-checked
77
Abilash

ngModelとngCheckedは一緒に使用するためのものではありません。

ngCheckedは式を想定しているため、ng-checked="true"と言うことで、基本的にチェックボックスは常にデフォルトでチェックされると言っています。

モデルのブールプロパティに関連付けられたngModelを使用することができるはずです。他の何かが必要な場合は、ngTrueValueおよびngFalseValue（現在文字列のみをサポート）を使用するか、独自のディレクティブを記述する必要があります。

まさにあなたがやろうとしていることは何ですか？デフォルトで最初のチェックボックスのみをチェックしたい場合は、モデルを変更する必要があります-item1: true,。

編集：モデルの現在の状態をデバッグするためにフォームを送信する必要はありません。ところで、{{testModel}}をHTML（または<pre>{{testModel|json}}</pre>）にダンプできます。また、ngModel属性はng-model="testModel.item1"に簡略化できます。

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

122
Langdon

Ng-value-trueを使用して、angularにng-modelが文字列であることを伝えることができます。

公式のAngular docs- https://docs.angularjs.org/api/ngに示されているように、追加の引用符を追加した場合にのみng-true-valueが機能するようになりました。/input/input％5Bcheckbox％5D ）

ng-true-value="'1'"
11
JRT

In ng-initもtrueになると宣言できます

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

そして、ここに表示されている最初のオブジェクトとオブジェクトを選択できますtrue、false、flase

1
Naveen Kumar

できることは、ng-repeatを繰り返し使用している値をng-checkedに渡し、そこからng-classを利用して、結果に応じてスタイルを適用することです。

私は最近似たようなことをし、それは私のために働いた。

1
Scott

ng-modelおよびng-checkedディレクティブは一緒に使用しないでください

ドキュメントから：

ngChecked

ngChecked内の式が真である場合、要素にチェック属性を設定します。

このディレクティブは、ngModelと一緒に使用しないでください。予期しない動作が発生する可能性があります。

— AngularJS ng-checked Directive API Reference

代わりに、コントローラーから目的の初期値を設定します。

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
0
georgeawg