在UI选择的选择中添加静态选项

Question

在代码bellow选项中是从数据库中动态添加的。

<ui-select ng-model="model.people">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="value.id as value in options | filter: $select.search">
        <div ng-bind-html="value.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

我的问题是：如何在下拉列表中手动添加一个选项。有什么方法可以实现？

Answer 1

最简单的方法是将其从服务器恢复数据后，将其添加到组件/控制器中的options。手动将其作为数组中的第一项。

options.splice(0,0,{id: -1, name: 'all'});

Answer 2

您可以在控制器本身的JSON options中添加一个static对象。

使用数组 unshift((方法将一个或多个元素添加到数组的开头并返回新数组的新长度。

演示

var app = angular.module('app', ['ui.select']);
app.controller("myCtrl", function () {
    vm = this;
    vm.values = [{
        'key': 22,
        'value': 'Kevin'
    }, {
        'key': 24,
        'value': 'Fiona'
    }];
    vm.values.unshift({'key': '', 'value': 'Static'});
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.css" rel="stylesheet"/>
<div ng-app="app" ng-controller="myCtrl as vm">
    <ui-select tagging ng-model="vm.selected" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value">
            <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
        
    </ui-select>
</div>

Answer 3

这应该有效：

<ui-select ng-model="model.people" theme="bootstrap">
<ui-select-match>{{ $select.selected }}</ui-select-match>
<ui-select-choices repeat="choice in ['option 1', 'option 2']">
    <span>{{ choice }}</span>
</ui-select-choices>

Answer 4

如果要保留 options list as-is，并且仅在下拉列表中添加静态选项，则可以使用：

<ui-select-choices repeat="value.id as value in [ staticOption ].concat(options)">