Angular set tag as selected

Question

Angular set tag as selected

I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.

This is my option-menu:

 <select>
  <option ng-repeat="item in items">{{item}}</option>
 </select>

and the item "one" should be active

<select>
     <option ng-repeat="item in items" ng-class="{selected: item=='one'}">
          {{item}}     
      </option>
 </select>

It doesn't work. Does anyone know how to set the option tag as active?

An example of how it works is this:

<select>
  <option>Blue</option>
  <option selected>Green</option>
  <option>Red</option>
</select>

angularjs
ionic-framework

Answer 1

Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.

<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
  <option value="">-- choose item--</option>
</select>

to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.

   $scope.selectedItemId = 1; //the Id belonging to the option to be selected

Answer 2

I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:

<select ng-model="selectedItem" ng-options="items"></select>

See https://docs.angularjs.org/api/ng/directive/select for more information.