Angular ui-select 默认选定值

Question

我在 Angular 中使用 ui-select 在我的页面中有一个选择框。我可以通过输入搜索，当我选择值时，会显示名称[这很好]，并且ng-model有选择的值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);
        });
    }
]);

当我从数据库加载记录时，我的模型 () 具有 ID。但我希望将名称显示给用户。

我该怎么做？我在这里做错了什么？

提前致谢！

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>