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>

我的问题是：如何添加一个选项＆＃34; all＆＃34;手动进入下拉列表。有没有办法实现这个目标？

Answer 1

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

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

Answer 2

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

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

<强>样本

＆＃13;

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'});
});

＆＃13;

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

＆＃13;

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 列表不变，并且只在下拉列表中添加静态选项，这将起作用：

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

为ui选择选项添加静态选项

4 个答案: