81

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

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

側で にng-checked評価されtrueた場合、は更新されません。チェックボックスごとにスタイリングを使用する必要があるため、上記の質問で示唆されているようにはできません。htmlng-modelng-repeat

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

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

必要なものを確認するには、コンソールを開いてSubmitボタンをクリックしてください。チェックボックスにはチェックを入れないでください。

前もって感謝します！

4

7 に答える 7

124

ngModelngChecked一緒に使用することを意図したものではありません。

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

ngModelモデルのブール値プロパティに関連付けられた を使用できるはずです。他の何かが必要な場合は、ngTrueValueand ngFalseValue(現在は文字列のみをサポートしています) を使用するか、独自のディレクティブを記述する必要があります。

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

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

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

于 2013-05-17T03:52:19.290 に答える
14

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

そのように余分な引用符を追加した場合にのみ、ng-true-valueを機能させることができました（公式のAngularドキュメントに示されているように- https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D）

ng-true-value="'1'"
于 2015-04-07T11:08:49.333 に答える
1

ng-init で As を宣言することもできます

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

于 2016-12-07T10:14:53.070 に答える
1

ng-modelディレクティブとディレクティブを一緒に使用ng-checkedしないでください

ドキュメントから：

ngチェック済み

内部の式が true の場合、要素に checked 属性を設定しますngChecked。

ngModel予期しない動作を引き起こす可能性があるため、このディレクティブを と一緒に使用しないでください。

— AngularJS ng-checked ディレクティブ API リファレンス

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

<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 };
于 2018-07-06T16:57:30.540 に答える