ngOption默認選中的選項

如何在選擇框中默認選項...我試了幾個選項，並沒有得到它ngOption默認選中的選項

我試圖創建與來自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);

來源

2015-06-23 Fanatic

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

因此，無論你想一個選項選擇出來，或者你初始化你productSelected相同的陣列。

來源

2015-06-23 09:30:36 skubski

嗨skubiski！我這樣做是因爲我需要在選項文本中有價格和產品名稱，而且我還需要更改每個產品的url選項的值。（track by product.url）設置值。我不知道我能否做到這一點:) – Fanatic

這不是什麼問題。從邏輯上說，您使用的是與您選擇的產品相同的清單。您選擇的產品或型號可以是列表的參考，但在這種情況下，您需要該列表中的產品。 – skubski

假設'ProductVariant.getData（）'返回一個數組，不需要將其添加到數組中。 '$ scope.item = ProductVariant.getData（）;'就足夠了。這將意味着你在ng-options中的迭代將變成'... for product in item ...'，這樣'$ scope.productSelect = $ scope.item [0];'確實是item數組的第一項。 – 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"> 
<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">

要顯示第一個值選擇

來源

2015-06-23 09:35:30 Vineet

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

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

如果ProductVariant.getData()是一個承諾（異步調用），然後$scope.item[0];也可以在第三階段即$scope.productSelect = $scope.item[0];被稱爲不確定的。

雖然爲別人提到的還有奇怪的事實，你重複了只有第一個索引項目列表：product in item[0]

來源

2015-06-23 09:35:32

感謝您的幫助。

使用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];

有了這些變化，該產品的一個被默認選中我已經得到了。

來源

2015-06-23 10:39:04 Fanatic

ngOption默認選中的選項

回答

相關問題