angularjs - Conditional ng-options on select with Angular -


i have select i'd change ng-options display based upon viewport. here working example of using 2 selects, hiding/showing if mobile (using bootstrap 3 classes). styles of select conditional using css3, i'd have data conditional well.

<select id="selectsearchlocation"     class="form-control search-location hidden-xs"     ng-model="vm.searchlocation"     ng-options="x.code x.name +' (' + x.code + ')' x in vm.searchlocations"> </select> <select id="selectsearchlocation"     class="form-control search-location visible-xs"     ng-model="vm.searchlocation"     ng-options="x.code x.code x in vm.searchlocations"> </select> 

you can see difference in ng-options, display/format "as" changes. i.e. "colorado - co" "co" mobile if searchlocations array of state objects.

could handled filter in angular?

there multiple ways of doing this. first thing comes mind use function instead of literal value "as".

something like:

ng-options="x.code searchdisplay(x) x in vm.searchlocations" 

and in controller:

$scope.searchdisplay = function(searchloc) {   if (mobile) {     return searchloc.code;   }   return searchloc.name + ' (' + searchloc.code + ') '; }; 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -