オプションを選択するために静的オプションを追加する

Question

<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に1つのstaticオブジェクトを追加することができます。

配列unshift()メソッドを使用して、1つ以上の要素を配列の先頭に追加し、新しい配列の新しい長さを返します。

DEMO

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>