如何在承诺后填充选项角度ui-select?

时间:2016-10-20 10:42:17

标签: javascript angularjs angular-ui angular-promise ui-select

我有html

 <ui-select multiple ng-model="item.selectedOrganizations" theme="bootstrap" ng-disabled="disabled" sortable="true" close-on-select="false">
        <ui-select-match placeholder="Select organizations...">{{$item.Name}}</ui-select-match>
        <ui-select-choices repeat="organization.Name as organization in organizationsDB | propsFilter: {Name: $select.search}">
                <div ng-bind-html="organization.Name | highlight: $select.search"></div>
        </ui-select-choices>
 </ui-select>

我已经在item.selectedOrganizations中有了一些东西,所以我会用一些值预填充选择框。一系列名字。

item.selectedOrganizations = selectedOrganizations;

我将使用一些数据填充选择框的选项。

$http.get('/admin/organizations')
    .success(function(data){
        vm.organizationsDB = data.data;
});

现在一切都有效但当然我必须声明变量:

 vm.organization = {};
 // vm.organizationsDB = [];

如果我将留下评论,则选择框将起作用但控制台中有错误。如果我删除注释并首先声明organizationalDB变量,则语法中不会出现错误,但item.selectedOrganizations将不会使用名称数组预先填充。

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

你的观点有点不对,我想你是从一个例子中复制过来的,并没有把它与你自己的实现联系在一起。

认为我已经在下面解决了你的问题(在这里小提琴:http://jsfiddle.net/qmf49qo3/)。我添加了一个恶搞对象文字代替你的承诺响应。

查看

<div ng-app="app" ng-controller="myCtrl as vm">
  <ui-select tagging ng-model="vm.selectedOrganizations" theme="bootstrap">
    <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="val as organization in vm.organizationsDB  | filter: $select.search track by organization.value">
      <div ng-bind="organization.value | highlight: $organization.search"></div>
    </ui-select-choices>

  </ui-select>
</div>

<强>模型

var app = angular.module('app', ['ui.select']);

app.controller("myCtrl", function() {
  vm = this;
  vm.isLoaded = false;
  vm.organizationsDB = [{
    'key': 1,
    'value': 'IBM'
  }, {
    'key': 2,
    'value': 'Microsoft'
  }];
  vm.selected;
  vm.selectedOrganizations = {
           'key': 1,
           'value': 'Prepopulated Value'
           }
});