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

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

Answer 1

像其他指令一样， ng-if指令创build一个子范围。 看到这个小提琴： http : //jsfiddle.net/Erk4V/4/

所以，你的checkbox会改变子范围内的testb ，而不是外层父范围。

请注意，如果要修改父范围中的数据，则需要修改对象的内部属性，如添加的最后一个div。

Answer 2

您可以使用$parent像这样引用在父范围中定义的模型

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

Answer 3

你可以使用ngHide （或者ngShow）指令。 它不会像ngIf那样创build子范围。

 <div ng-hide="testa"> 

Answer 4

是的，ng-hide（或者ng-show）指令不会创build子范围。

这是我的做法：

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

Answer 5

我们在其他许多情况下也是这样，我们在内部决定的是始终有一个控制器/指令的包装器，所以我们不需要考虑这个问题。 这里是你用我们的包装的例子。

 <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希望这会有所帮助

Answer 6

你可以这样做，你的MODfunction将完美的让我知道如果你想要一个代码笔

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