使用ng-options

Question

我只是想为我的选择/选项下拉菜单创建一个分隔符，但我很难这样做。我正在尝试创建一个如下所示的下拉列表：

• 没有图片

• CUSTOM IMAGE

• 其他数据....

我觉得我正在做的事应该有效，但不是......有任何帮助吗？

控制器

$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

如果您使用的是更新版本的angular （＆gt; = 1.4我认为），您可以在disable when属性中使用ng-options语法。例如：

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

我在这里创建了一个示例小提琴：http://jsfiddle.net/wwu071so/1/

Answer 2

您可以使用orderBy创建optgroup并获得所需效果。

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];