I have this very simple code. filterOption = 'Account ID' and the input appears when the value is right. But ng-model doesn't work and I dont see anything in the pre
<pre>{{test}}</pre> // doesnt work <pre> {{filterOption}}</pre> // this shows Account ID <input ng-if="filterOption == 'Account ID'" ng-model="test" required> Scoping your controller and assigning them with controllerAs would solve this issue. Please see https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md for better coding style so you don't encounter these issues.
<!DOCTYPE html> <html ng-app="abc"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-controller="MyCtrl as vm"> <pre>{{vm.test}}</pre> // doesnt work <pre> {{vm.filterOption}}</pre> // this shows Account ID <input ng-if="vm.filterOption === 'Account ID'" ng-model="vm.test" required> </div> <script> var app=angular.module('abc',[]); app.controller('MyCtrl',MyCtrl); function MyCtrl($scope){ var vm = this; vm.filterOption = "Account ID"; } </script>ng-if has its own, child scope, which allows it to destroy and restore scoped elements. Because of that, your models need to reach the parent scope (usually the controller), which can be done with $parent prefix
Here is an example of this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app> <input type="text" ng-if="true" ng-model="a"> Doesn't work <br> <input type="text" ng-if="true" ng-model="$parent.a"> Works <br> {{a}} </div>
$parent is a code smell, a symptom of a deeper problem. When there is more than one child scope between the data and the ng-model, it won't work. It is better to use a named object. See this Youtube video. Misko demonstrates the primitive binding issue with ng-switch.Check this. ng-if creates its own scope. So if you want to use ng-model along with ng-if then use $parent
<!DOCTYPE html> <html ng-app="abc"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-controller="myCtrl"> <pre>{{test}}</pre> // doesnt work <pre> {{filterOption}}</pre> // this shows Account ID <input ng-if="filterOption == 'Account ID'" ng-model="$parent.test" required> </div> <script> var app=angular.module('abc',[]); app.controller('myCtrl',function($scope){ $scope.filterOption="Account ID"; }); </script> </body> </html>
$parent is a code smell, a symptom of a deeper problem. When there is more than one child scope between the data and the ng-model, it won't work. It is better to use a named object. See this Youtube video. Misko demonstrates the primitive binding issue with ng-switch.You need to use the controller to access properties in the template. here the example : https://stackblitz.com/edit/sof-angularjs-5jwgpu?file=home%2Fhome.html
ng-ifcreates its own scope. Reach the controllers scope with$parent., so you would needng-model="$parent.test"$parentis a code smell, a symptom of a deeper problem.