使用ng-options动态添加禁用的选项项目

Question

我只是想为我的选择/选项下拉菜单创建一个分隔符，而在这样做时遇到了麻烦。 我正在尝试创建一个看起来像这样的下拉菜单：

• 没有图像

• 定制图片

  ---

• 其余数据...

我觉得我正在做的事情应该可以，但是没有...任何帮助吗？

调节器

$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的较新版本（我认为> = 1.4） ，则可以在ng-options属性内使用disable when语法。 例如：

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