ng Option 默认选择的选项答案

【问题标题】：ngOption default selected optionng Option 默认选择的选项
【发布时间】：2015-06-23 09:24:09
【问题描述】：

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

我尝试使用来自 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);

【问题讨论】：

标签： angularjs angular-ngmodel angular-services angularjs-ng-options

【解决方案1】：

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

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

显示选择的第一个值

【讨论】：

【解决方案2】：

感谢您的帮助。

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

通过这些更改，我发现默认选择了其中一种产品。

【讨论】：

【解决方案3】：

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

因此，您要么尝试从一个选项中进行选择，要么将您的 productSelected 初始化为相同的数组。

【讨论】：

嗨 skubiski！我这样做是因为我需要在选项文本中包含价格和产品名称，而且我还需要更改每个产品 url 的选项值。（通过 product.url 跟踪）用于设置值。我不知道我是否可以这样做:)
这不是问题所在。从逻辑上讲，您使用的列表与您的 productSelected 相同。当然，您的 productSelected 或模型可以作为列表的引用，但在这种情况下，您需要该列表中的产品。
假设ProductVariant.getData() 正在返回一个数组，则无需将其添加到数组中。 $scope.item = ProductVariant.getData(); 就足够了。这意味着您在 ng-options 中的迭代将变为 .. for product in item...，因此 $scope.productSelect = $scope.item[0]; 确实是项目数组的第一项。
嗨 skubski 感谢您的解释！我明白。我已经解决了那部分..但我仍然有默认选择产品的问题
Oki 很酷，现在您需要验证 ProductVariant.getData(); ，就像答案中提到的那样，在实际发送产品列表之前（例如 $http.get）没有返回承诺。如果发生这种情况，则意味着$scope.productSelect = $scope.item[0]; 实际上是用undefined 设置的。这可以通过在成功处理程序中解析此代码来解决，使用 ng-init 指令或 ng-selected="$first"。

【解决方案4】：

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

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

如果ProductVariant.getData() 是一个promise（异步调用），那么$scope.item[0]; 也可能在$scope.productSelect = $scope.item[0]; 被调用的阶段是未定义的。

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

【讨论】：