Question

如何在选择框中设置默认选项...我尝试了几个选项但没有得到它

我尝试使用来自json的对象的值在我的Contralador上创建一个范围：

像这样：

$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);

Answer 1

你有ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" 并$scope.productSelect = $scope.item[0];

因此，您要么尝试选择一个选项，要么正在初始化您的productSelected到同一个数组。

Answer 2

你想要什么？要显示默认选项，请使用

<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">

显示第一个选定的值

Answer 3

感谢您的帮助。

在萤火虫和你们每个人的帮助下以及特别的 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];

通过这些更改，我已经确定默认选择了其中一个产品。

Answer 4

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

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

如果ProductVariant.getData()是承诺（异步调用），则$scope.item[0];也可能在调用$scope.productSelect = $scope.item[0];的阶段未定义。

虽然正如其他人提到的那样，也有一个奇怪的事实是你只重复项目列表中的第一个索引：product in item[0]

ngOption默认选择的选项

4 个答案: