Add a disabled option item dynamically, using ng-options

Question

I'm just trying to create a separator for my select/option dropdown menu and am having trouble doing so. i'm trying to create a dropdown that looks like this:

• NO IMAGE

• CUSTOM IMAGE

  ---

• rest of data....

I feel like what i'm doing should work but it's not... any help?

controller

$scope.teamListWithOptions.push({ name: "NO IMAGE" }, { name: "CUSTOM IMAGE" }, { name: "____________", notSelectable: true });

//this just adds the rest of the data
for (var a = 0; a < data.length; a++) {
  $scope.teamListWithOptions.push(data[a]);
}

html

<select class="form-control" ng-model="contentTeam1Selected" ng-change="selectContentTeam1(contentTeam1Selected)" 
                                ng-options="team as team.name for team in teamListWithOptions" ng-disabled="team.notSelectable">
                        </select>

Answer 1

If you are using a more recent version of angular (>= 1.4 i think) , you can use the disable when syntax inside the ng-options attribute. For example:

ng-option="p as p.name disable when p.show == false for p in people"

I have created an example fiddle here: http://jsfiddle.net/wwu071so/1/

Answer 2

You could probably use orderBy to create an optgroup and get the effect you want.

http://jsfiddle.net/wwu071so/

<select
        ng-options="p as p.name group by p.show for p in people | orderBy:'show'"
        ng-model="selectedPerson"></select>

$scope.people = [
    { id: 1, name: 'Image' },
    { id: 2, name: 'Custom'},
    { id: 3, name: 'John', show: ' ' },
    { id: 4, name: 'Ben', show: ' ' }
];
$scope.selectedPerson = $scope.people[3];