Угловое ui-select по умолчанию выбранное значение

Question

Я использую ui-select в Angular для выбора поля на моей странице. Я могу выполнить поиск, набрав, и когда я выберу значение, будет отображаться имя [Которое хорошо], а в ng-модели есть выбранные значения id [это также верно]

Теперь я пытаюсь загрузить представление уже сохраненная запись. Я хочу, чтобы выбранный ящик был предварительно заполнен.

Но это не так!

Это мой HTML

<ui-select ng-model="vm.product.category"> 
    <ui-select-match placeholder="Type to search">{{ (vm.categories | filter : { id : vm.product.category } : true)[0].name }}</ui-select-match> 
    <ui-select-choices repeat="category.id as category in (vm.categories | filter: {name: $select.search})"> 
     <span ng-bind-html="category.name | highlight: $select.search"></span> 
    </ui-select-choices> 
</ui-select> 

Вот мой контроллер,

app.controller('productDetailsController', [ 
    '$scope', 'Product', 
    function ($scope, Product) { 
     var vm = this; 
     vm.product = {}; 
     vm.categories = [{name: "General", id: "1"}, {name: "Product", id: "2"}] 

     Product.get({id: id}).$promise.then(function (data) { 
      vm.product = data.data; 
     }, function (error) { 
      alert(error); 
     }); 
    } 
]); 

Когда я загружаю запись из базы данных моей модели() имеет идентификатор. но я хочу, чтобы имя отображалось пользователю.

Как я могу это сделать? Что я делаю неправильно здесь?

Заранее благодарен!

Answer 1

var app = angular.module('app', ['ui.select']); 
 
app.service('myservice', ['$timeout', '$q', 
 
    function($timeout, $q) { 
 
    this.getData = function() { 
 
     var defer = $q.defer(); 
 
     //Here, $timeout corresponds to $http 
 
     $timeout(function() { 
 
     defer.resolve({ 
 
      'data': { 
 
      product_name: "Galaxy S3", 
 
      product_description: "Galaxy S3 desc", 
 
      category: 1, 
 
      is_active: true 
 
      } 
 
     }); 
 
     }, 1000); 
 
     return defer.promise; 
 
    } 
 
    } 
 
]); 
 
app.controller('productDetailsController', ['$scope', 'myservice', 
 
    function($scope, myservice) { 
 
    var vm = this; 
 
    vm.product = {}; 
 
    vm.categories = [{ 
 
     name: "General", 
 
     id: "1" 
 
    }, { 
 
     name: "Product", 
 
     id: "2" 
 
    }]; 
 

 
    myservice.getData().then(function(data) { 
 
     vm.product = data.data; 
 
    }); 
 

 
    } 
 
]);

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.css" rel="stylesheet" /> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script> 
 

 
<div ng-app="app" ng-controller="productDetailsController as vm"> 
 
    <ui-select ng-model="vm.product.category"> 
 
    <ui-select-match placeholder="Type to search">{{$select.selected.name}}</ui-select-match> 
 
    <ui-select-choices repeat="category.id as category in vm.categories | filter: {name: $select.search}"> 
 
     <div ng-bind="category.name | highlight: $select.search"></div> 
 
    </ui-select-choices> 
 
    </ui-select> 
 
</div>