Tanjore Raj Tanjore Raj - 1 month ago 7
AngularJS Question

angular ng-repeat add text to the first item inside the select options

I'm trying to add a text "primary" to the select options dropdown, where the text primary should be applied only to the 1st item of the options or if a new user is added he should be primary.

in HTML

<div ng-controller="MyCtrl">
<select>
<option ng-repeat="names in name">{{names.name}} - {{names.id}} <span ng-if="$first">primary</span></option>
</select>
</div>

in Controller

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.name = [{name:"jack",id:1},{name:"jill",id:2},{name:"nick",id:3},{name:"homes",id:4},{name:"jhones",id:5},{name:"james",id:6}];
}


JsFiddle here

Answer

The issue is that you are trying to put a <span> inside of an <option> which isn't allowed with html. While your fiddle is using Angular 1.0.1, after angular 1.1.5 they added the ability to use a ternary operator. Using that we can accomplish what you intend:

<div ng-controller="MyCtrl">
  <select>
  <option ng-repeat="names in name">{{names.name}} - {{names.id}} {{$first ? 'primary' : ''}}</option>
  </select>
</div>

Hopefully that can help steer you in the right direction.