0

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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
user9999443
  • 33
  • 1
  • 4
  • 1
    `ng-if` creates its own scope. Reach the controllers scope with `$parent.`, so you would need `ng-model="$parent.test"` – Aleksey Solovey Jun 28 '18 at 10:20
  • Use of `$parent` is a [code smell](https://en.wikipedia.org/wiki/Code_smell), a symptom of a deeper problem. – georgeawg Jun 28 '18 at 12:16
  • This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – georgeawg Jun 28 '18 at 12:17

4 Answers4

2

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>
Alireza Balouch
  • 467
  • 4
  • 13
1

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>
Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
  • 1
    Use of `$parent` is a [code smell](https://en.wikipedia.org/wiki/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](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m). Misko demonstrates the primitive binding issue with `ng-switch`. – georgeawg Jun 28 '18 at 12:20
0

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>
Adesh Kumar
  • 952
  • 2
  • 16
  • 33
  • Use of `$parent` is a [code smell](https://en.wikipedia.org/wiki/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](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m). Misko demonstrates the primitive binding issue with `ng-switch`. – georgeawg Jun 28 '18 at 12:24
0

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

t7yang
  • 714
  • 5
  • 7