ngOption выбран вариант по умолчанию

Как иметь параметр по умолчанию в поле выбора... Я пробовал несколько вариантов и не понял

Я попытался создать область действия на своем контраладоре со значением объекта, полученным из json:

Как это:

$scope.productSelect = $scope.item[0];

это мой код:

html:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">

JS:

(function (){

  'use strict';

  /**
   * @ngdoc function
   * @name variantApp.controller:AppCtrl
   * @description
   * # AppCtrl
   * Controller of the variantApp
   */

   var app = angular.module('variantApp.product.variantCtrl', []);

   app.controller('AppCtrl',
    [
      '$scope',
      'ProductVariant',
      '$log',
      function ($scope, ProductVariant, $log){

      $scope.item = [
        ProductVariant.getData()
      ];

     $scope.productSelect = $scope.item[0];

     $log.info($scope.productSelect);


   }]);

})(window, angular);

angularjs angular-services angular-ngmodel angularjs-ng-options
person Community    schedule 23.06.2015    source источник

Ответы (4)


arrow_upward
0
arrow_downward

У вас есть ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" и $scope.productSelect = $scope.item[0];

Итак, либо вы пытаетесь выбрать один из вариантов, либо инициализируете свой productSelected одним и тем же массивом.

person skubski    schedule 23.06.2015
comment
Привет скубиски! Я сделал это, потому что мне нужно указать цену и название продукта в тексте опции, а также мне нужно изменить значение опции для URL-адреса каждого продукта. (отслеживание по product.url) для установки значения. Не знаю, можно ли поступить иначе :) - person ; 23.06.2015
comment
Это не то, что неправильно. Логически вы используете тот же список, что и ваш productSelected. Ваш продуктSelected или модель может быть ссылкой на список, конечно, но в этом случае вам нужен продукт из этого списка. - person skubski; 23.06.2015
comment
Предполагая, что ProductVariant.getData() возвращает массив, нет необходимости добавлять его внутрь массива. $scope.item = ProductVariant.getData(); будет достаточно. Это будет означать, что ваша итерация в ng-options станет .. for product in item..., так что $scope.productSelect = $scope.item[0]; действительно будет первым элементом массива элементов. - person skubski; 23.06.2015
comment
Привет skubski Спасибо за объяснение! Я понимаю . Я уже решил эту часть ... но у меня все еще есть проблема с выбором продукта по умолчанию. - person ; 23.06.2015
comment
Хорошо, теперь вам нужно убедиться, что ProductVariant.getData(); , как указано в ответе, не возвращает обещание до того, как (например, $http.get) фактически отправит список продуктов. Если это происходит , это будет означать, что $scope.productSelect = $scope.item[0]; на самом деле установлено значение undefined. Это можно решить, разрешив этот код в обработчике успеха, используя директиву ng-init или ng-selected=$first. - person skubski; 23.06.2015
comment
Да, как я упоминал, и @skubski повторил, если вызов getData является обещанием, лучше всего выполнить следующую инициализацию $scope.productSelect = $scope.item[0]; в обработчике успеха. На самом деле было бы лучше иметь список и выбор по умолчанию в обработчике, если это так. Но мне также очень нравится подход ng-selected=$first. Хотя я не знаю, какова производительность с точки зрения циклов дайджеста при таком подходе. - person Paul Popiel; 23.06.2015

arrow_upward
1
arrow_downward

Что вы хотите ? Чтобы показать параметр по умолчанию, используйте

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">
<option value="">Default</option>
</select>

Или, чтобы показать только выбранное значение по умолчанию, используйте:

ng-selected="EXPRESSION". Нравиться

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" ng-selected="$first">

Чтобы показать первое выбранное значение

person Vineet    schedule 23.06.2015

arrow_upward
1
arrow_downward

Спасибо за помощь.

С помощью firebug и каждого из вас и в специальных skubski я решил

Изменение, которое я сделал:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">
</select>

для этого:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' -     '+product.variantQualifierName for product in item track by product.url">
</select>

а также

$scope.item = [
    ProductVariant.getData()
  ];

 $scope.productSelect = $scope.item[0];

для этого:

$scope.item = ProductVariant.getData();
$scope.productSelect =  $scope.item[0];

С этими изменениями я получил, что один из продуктов выбран по умолчанию.

person Community    schedule 23.06.2015

arrow_upward
0
arrow_downward 

 $scope.item = [
    ProductVariant.getData()
  ];

 $scope.productSelect = $scope.item[0];

Если ProductVariant.getData() является промисом (асинхронным вызовом), то $scope.item[0]; также может быть неопределенным на этапе вызова $scope.productSelect = $scope.item[0];.

Хотя, как уже упоминал кто-то другой, существует также странный факт, что вы повторяете только первый индекс в списке элементов: product in item[0]

person Paul Popiel    schedule 23.06.2015