0

I have the following code:

  <div layout="row" layout-align="center" ng-if="!sort">
    <div class="sort" layout-padding flex=50 layout-align="center" layout="column">
      <input class="searchInput" ng-model="searchText" ng-model-options='{ debounce: 600 }' ng-change="search()">
    </div>
  </div>

When sort is not set, the input is shown correctly (and hidden when sort is set), but when entering text into the input, $scope.searchText is undefined.

If I remove the ng-if, everything works correctly.

Or Weinberger
  • 7,332
  • 23
  • 71
  • 116
  • 1
    [Angularjs ng-model doesn't work inside ng-if](https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if). `ng-if` creates its own scope, try reaching for a parent's scope with `ng-model="$parent.searchText"` – Aleksey Solovey Nov 06 '17 at 14:03
  • Have you tried with `ng-hide` instead? `ng-if` removes totally from DOM and clones to re-insert. Maybe that's the cause? – Kaddath Nov 06 '17 at 14:04
  • @AlekseySolovey That works, is there a more elegant way of doing this? – Or Weinberger Nov 06 '17 at 14:04
  • as Kaddath mentioned, `ng-if` removes DOM completely (which can be slow), so alternative is to use `ng-hide` / `ng-show` that just hides it and doesn't create any problems with scopes – Aleksey Solovey Nov 06 '17 at 14:06
  • 1
    Another question resolved in the comments section... – gyc Nov 06 '17 at 14:22
  • @gyc it was a potential duplicate in the first place `¯\_(ツ)_/¯` – Aleksey Solovey Nov 06 '17 at 14:51
  • Possible duplicate of [Angularjs ng-model doesn't work inside ng-if](https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if) – gyc Nov 06 '17 at 15:23

0 Answers0