如何為angular ui-select設置默認值

Question

題 ：

如何將默認值設置為角度ui-select

從對象和對象獲取的下拉值不具有默認值。

和ui-select應該在前端設置默認值。

例如：

下拉值如下

1 -all fruits 2 -apple 3 -banana 4-water melon

從2到4的值是從服務器發送的對象派生的。但是前端需要設置默認值，即1 - 所有水果

通過ui-select2參考下面的示例集如何在ui-select中遷移它？

<select ng-model="fID" class="select"  ui-select2 data-placeholder="select fruit">
            <option value="">All fruits</option>
            <option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option>
        </select>

<ui-select theme="select2" ng-model="fruits.selected">
            <ui-select-match placeholder="select please" allow-clear="false">                    {{$select.selected.name}}
</ui-select-match>
            <ui-select-choices repeat="f in fruits | filter:$select.search">
                <div ng-bind-html="f.name | highlight: $select.search:'underline'"></div>
            </ui-select-choices>
        </ui-select>

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview https://github.com/angular-ui/ui-select鏈接：angular-ui / ui-select

Answer 1

你沒有使用id或類似的東西作為選項值，所以ui-select比較對象地址以了解它是否被選中。

var p1 = { name: 'Adam',      email: 'adam@email.com',      age: 10 };
  $scope.person = {selected: p1};
  $scope.people = [
    p1,
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
  ];

像這樣更換plunker，你將有一個默認的選定值。

要在視圖上設置默認值，您可以使用ng-init並將第一個對象設置為選中狀態

Answer 2

我找到了這個工作示例： http ： //jsfiddle.net/NfPcH/28/

角度代碼：

<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>

控制器：

app.controller('Ctrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
});

Answer 3

在您的控制器中添加以下代碼：

 $scope.fruits.selected = {name: 'All fruits'};

以上將默認選擇值設置為下拉列表。