Блог

Главная - Вопросы по программированию - Угловой пользовательский интерфейс -выберите выбранное значение по умолчанию

Угловой пользовательский интерфейс -выберите выбранное значение по умолчанию

#angularjs #ui-select

#angularjs #пользовательский интерфейс -выберите

Вопрос:

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

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

Но это не так!

Это мой 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);
        });
    }
]);

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

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

Заранее спасибо!

Ответ №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>

Комментарии:

1. Спасибо за ответ. Да, я назначаю vm.product.category ключ при загрузке данных. Когда я vm.product заполняю данные из базы данных, я не вижу название категории для данного идентификатора в селекторе.

2. какие данные содержатся?

3. Это будет более полезно для понимания вашей проблемы.

4. У меня есть это, data['data'] = {product_name: "Galaxy S3", product_description: "Galaxy S3 desc", category: 1, is_active: true} в данных я отправляю другие ключи, такие как статус ответа, сообщение об ответе … и т.д…

5. Product.get({id: id}).$promise , не получите то, что есть $promise. Можете ли вы поделиться своим кодом продукта или услуги. И, пожалуйста, проверьте. затем выполняется или нет.