[解決済み】Angularjsのng-modelがng-ifの中で動かない。
2022-04-12 11:56:55
質問
以下は、問題を示すフィドルです。 http://jsfiddle.net/Erk4V/1/
ng-ifの中にng-modelがある場合、モデルが期待通りに動作しないようです。
これはバグなのか、それとも私が正しい使い方を誤解しているのか、疑問に思っています。
<div ng-app >
<div ng-controller="main">
Test A: {{testa}}<br />
Test B: {{testb}}<br />
Test C: {{testc}}<br />
<div>
testa (without ng-if): <input type="checkbox" ng-model="testa" />
</div>
<div ng-if="!testa">
testb (with ng-if): <input type="checkbox" ng-model="testb" />
</div>
<div ng-if="!someothervar">
testc (with ng-if): <input type="checkbox" ng-model="testc" />
</div>
</div>
</div>
解決方法は?
その
ng-if
ディレクティブは、他のディレクティブと同様、子スコープを作成します。以下のスクリプトを参照してください (あるいは
このjsfiddle
)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script>
function main($scope) {
$scope.testa = false;
$scope.testb = false;
$scope.testc = false;
$scope.obj = {test: false};
}
</script>
<div ng-app >
<div ng-controller="main">
Test A: {{testa}}<br />
Test B: {{testb}}<br />
Test C: {{testc}}<br />
{{obj.test}}
<div>
testa (without ng-if): <input type="checkbox" ng-model="testa" />
</div>
<div ng-if="!testa">
testb (with ng-if): <input type="checkbox" ng-model="testb" /> {{testb}}
</div>
<div ng-if="!someothervar">
testc (with ng-if): <input type="checkbox" ng-model="testc" />
</div>
<div ng-if="!someothervar">
object (with ng-if): <input type="checkbox" ng-model="obj.test" />
</div>
</div>
</div>
つまり、チェックボックスは
testb
の内側は子スコープですが、外側の親スコープはそうではありません。
親スコープにあるデータを変更したい場合は、最後に追加した div のように、オブジェクトの内部プロパティを変更する必要があることに注意してください。
関連
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
AngularJSのベストプラクティス。ng-repeatの$indexに注意する。
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJS テンプレートにおける if else ステートメント
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: window.initMap is not a function
-
[解決済み] プリフライト応答が成功しない
-
[解決済み] AngularJSのグローバル変数
-
[解決済み] Angular JS $locationChangeStart 次の url ルートオブジェクトを取得する
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] AngularJSの$parentは何を意味するのですか?
-
[解決済み] エラーです。[$injector:unpr] 不明なプロバイダです。ルートプロバイダ
-
[解決済み] 新しい/分離されたスコープを求める複数のディレクティブ [ngController, ...] がある。
-
[解決済み] Jasmineの "callThrough "と "callFake() "の実用的な例が欲しい
-
[解決済み] コントローラでフィルタを使用するには?