My setup is very simple
<button ng-click="query = ''" ng-if="query">X</button>
<input type="text" ng-model="query">
Check on planker but when I click on the button input is not cleaned
Add a comment
|
1 Answer
ng-if creates a child scope and the ng-click ="query=''" is set on child scope. Whereas your ng-model=query is defined on the parent scope.
The options are either to use ng-show
or pass a object property. See my fiddle here
http://plnkr.co/edit/LGmPALg4wTTmCJLE4aFa?p=preview
It would look like this
<body ng-app="" ng-init='query={data:""}'>
<button ng-click="query.data = 'a'" ng-if="query.data">X</button>
<input type="query" ng-model="query.data">
</body>
Also spend some time of understanding the prototype inheritance in angularjs scope https://github.com/angular/angular.js/wiki/Understanding-Scopes
4 Comments
Sergey Romanov
Actualy it is simplified version. But in my controller I have
$scope.query = '' for initialization. Because I need to have access to input value there. How it should be then?Sergey Romanov
I have managed it by using
ng-show, but I still what to understand what is the difference.
Chandermani
As i said ng-if creates a new child scope, and when you set
ng-click="query=''", you are setting a variable on the new scope, not the query property on parent scope. Look at the wiki and use batarang extension for chrome with your old example, you would see the scopes and the properties defined on it.Sergey Romanov
Thank you for batarang! I had no idea about that. :)