Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ng-hide not working in data list Angular

Tags:

<body ng-app>
<datalist id="dataList">
  <select id="select">  
    <option ng-repeat="val in temp" ng-hide="true"  >{{val}}</option>
  </select>
</datalist>                            
<input  list="dataList"   ng-model="fromLocation"  />
</body>

http://jsfiddle.net/awnqm/284/ This is the fiddle, i have a simple datalist and an input (using that datalist). Why the ng-hide in options tag is not working.

like image 203
404 Not Found Avatar asked Apr 13 '16 17:04

404 Not Found


1 Answers

ngHide does not work for options. You need to use ngIf. But, it's available from Angular 1.1.5 (Angular 1.1.5 introduced the ngIf directive). So, update your Angular version and use ngIf to resolve the issue. See

<body ng-app>
<datalist id="dataList">
  <select id="select">  
    <option ng-repeat="val in temp" ng-if="false"  >{{val}}</option>
  </select>
</datalist>                            
<input  list="dataList"   ng-model="fromLocation"  />
</body>

http://jsfiddle.net/Gosha_Fighten/awnqm/288/

ngHide simply applied display: none CSS to an element which does not work for options. For example, [IE11, Win7] "display: none" on OPTION tag is ignored. ngIf does not render an element at all.

like image 61
Gosha_Fighten Avatar answered Sep 28 '22 03:09

Gosha_Fighten