Angularjs ng-model 在 ng-if 中不起作用 [英] Angularjs ng-model doesn't work inside ng-if

查看：24
本文介绍了Angularjs ng-model 在 ng-if 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是显示问题的小提琴.http://jsfiddle.net/Erk4V/1/

看来，如果我在 ng-if 中有一个 ng-model，该模型不会按预期工作.

我想知道这是一个错误还是我误解了正确的用法.

<div ng-controller="main">测试 A:{{testa}}<br/>测试 B:{{testb}}<br/>测试 C:{{testc}}<br/><div>testa (没有 ng-if): <input type="checkbox" ng-model="testa"/>
<div ng-if="!testa">testb(使用 ng-if):<input type="checkbox" ng-model="testb"/>

<div ng-if="!someothervar">testc(使用 ng-if):<input type="checkbox" ng-model="testc"/>

解决方案

ng-if 指令，像其他指令一样创建一个子作用域.请参阅下面的脚本(或 this jsfiddle)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script><脚本>功能主($范围){$scope.testa = false;$scope.testb = false;$scope.testc = false;$scope.obj = {test: false};}<div ng-app ><div ng-controller="main">测试 A:{{testa}}<br/>测试 B:{{testb}}<br/>测试 C:{{testc}}<br/>{{obj.test}}<div>testa (没有 ng-if): <input type="checkbox" ng-model="testa"/>

<div ng-if="!testa">testb(使用 ng-if):<input type="checkbox" ng-model="testb"/>{{testb}}

<div ng-if="!someothervar">testc(使用 ng-if):<input type="checkbox" ng-model="testc"/>

<div ng-if="!someothervar">对象(使用 ng-if):<input type="checkbox" ng-model="obj.test"/>

因此，您的复选框会更改子范围内的 testb，但不会更改外部父范围.

请注意，如果您想修改父作用域中的数据，您需要像我添加的最后一个 div 一样修改对象的内部属性.

Here is the fiddle showing the problem. http://jsfiddle.net/Erk4V/1/

It appears if I have an ng-model inside of an ng-if, the model does not work as expected.

I am wondering if this is a bug or if I am misunderstanding the proper usage.

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

解决方案

The ng-if directive, like other directives creates a child scope. See the script below (or this 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>

So, your checkbox changes the testb inside of the child scope, but not the outer parent scope.

Note, that if you want to modify the data in the parent scope, you'll need to modify the internal properties of an object like in the last div that I added.

这篇关于Angularjs ng-model 在 ng-if 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆