小编典典

Angularjs ng-model 在 ng-if 中不起作用

all

这是显示问题的小提琴。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>

阅读 30

收藏
2022-06-23

共1个答案

小编典典

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 中一样。

2022-06-23