1. ホーム
  2. angularjs

[解決済み】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 のように、オブジェクトの内部プロパティを変更する必要があることに注意してください。