Search code examples
angularjsdatalistng-hide

Ng-hide not working in data list Angular

<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.

Solution

  • 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.