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

如果我在ng-if中有一个ng-模型,那么模型就不能像预期的那样工作。

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

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


您可以使用$parent来引用在父作用域中定义的模型,如下所示

<input type="checkbox" ng-model="$parent.testb" />

你可以使用ngghide(或ngShow)指令。它不像ngIf那样创建子作用域。

<div ng-hide="testa">

是的,ng-hide(或ng-show)指令不会创建子作用域。

以下是我的做法:

<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.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<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="$parent.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="testd" />
        </div>

    </div>
</div>

http://jsfiddle.net/bn64Lrzu/


你可以这样做,你的mod函数会工作得很好,如果你想要一支代码笔就告诉我

  <div ng-repeat="icon in icons">                   
                <div class="row" ng-if="$index % 3 == 0 ">
                    <i class="col col-33 {{icons[$index + n].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 1].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 2].icon}} custom-icon"></i>
                </div>
         </div>

我们在其他很多情况下都有这个,我们内部决定总是为控制器/指令有一个包装器,这样我们就不需要考虑它了。 这是你的例子与我们的包装。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.thisScope = $scope;
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="thisScope.testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="thisScope.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="thisScope.testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="thisScope.testd" />
        </div>

    </div>
</div>

希望这能有所帮助, Yishay