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>
This question is related to
angularjs
You can use $parent
to refer to the model defined in the parent scope like this
<input type="checkbox" ng-model="$parent.testb" />
You can use ngHide (or ngShow) directive. It doesn't create child scope as ngIf does.
<div ng-hide="testa">
You can do it like this and you mod function will work perfect let me know if you want a code pen
<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>
Yes, ng-hide (or ng-show) directive won't create child scope.
Here is my practice:
<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>
We had this in many other cases, what we decided internally is to always have a wrapper for the controller/directive so that we don't need to think about it. Here is you example with our wrapper.
<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>
Hopes this helps, Yishay
Source: Stackoverflow.com