使用Angularjs在選擇下拉菜單中設置默認值

我有一個對象，如下所示。我有顯示這些作爲一個下拉：使用Angularjs在選擇下拉菜單中設置默認值

var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]

以我控制器I具有攜帶的值的變量。該值決定該陣列中的上述三項將默認在下拉菜單中選擇：

$scope.object.setDefault = 600;

當我如下創建一個下拉形式項：

<select ng-model="object.setDefault" ng-options="r.name for r in list">

我面對兩個問題：

爲

<option value="0">abc</option> 
<option value="1">def</option> 
<option value="2">xyz</option>

生成列表3210

，而不是

<option value="4">abc</option> 
<option value="600">def</option> 
<option value="200">xyz</option>

無選項被默認情況下，即使我有ng-model="object.setDefault"

來源

2013-07-23 runtimeZero

在角里面選擇元素 –

Ajay..you裏面選擇的指數期權的價值屬性似乎是對的。所以現在的問題是，我如何給它一個自定義的值 – runtimeZero

當您使用NG選項來填充選擇列表中選擇，它採用全對象作爲選定的值，而不僅僅是您在選擇列表中看到的單個值。所以你的情況，你需要設置

$scope.object.setDefault = { 
    id:600, 
    name:"def" 
};

或

$scope.object.setDefault = $scope.selectItems[1];

我也建議只是在輸出模板$ scope.object.setDefault的值，看看我在說什麼關於選擇。

<pre>{{object.setDefault}}</pre>

來源

2013-07-23 15:55:56 Sharondio

只有第二個可以工作。選擇使用===來比較值。如果您使用相同的屬性設置另一個對象，則會被視爲不同。 –

很高興知道。我總是自己使用第二種方法，但是想出一個相同的對象會起作用。 – Sharondio

另一個選擇是使用'select as label for array in'來將模型綁定到值爲 – noj

-11

，我可以幫助你的HTML：中

<option value="">abc</option>

代替

<option value="4">abc</option>

設置abc設置爲默認值。

來源

2013-08-22 13:44:36

不會這樣做不工作 –

問題1：

生成的HTML是正常的。顯然，Angular的一個特性是能夠使用任何類型的對象作爲select的值。 Angular在HTML選項值和ng模型中的值之間進行映射。也看到在這個問題上Umur的評論：How do I set the value property in AngularJS' ng-options?

問題2：

確保您使用以下NG選項：

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

，並把這個在你的控制器選擇默認值：

object.item = 4

來源

2014-01-03 10:35:40 Stephanie

某些場景，object.item不會被加載或將被定義。

使用NG-INIT

<select ng-init="object.item=2" ng-model="object.item" 
ng-options="item.id as item.name for item in list"

來源

2014-03-06 23:06:48

ng-options正在枚舉我的列表0..10等，而不管實際的id值如何。沒關係。這只是渲染。實際值將以表單提交形式傳遞。 – nathanengineer

在查看

<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>

JS：

在側控制器

$scope.boxModel = 600;

來源

2014-04-04 05:50:46 Webfreaks

-3

我們應該使用名稱值對綁定值到dropdown.see的代碼瞭解更多詳情

function myCtrl($scope) { 
 
    $scope.statusTaskList = [ 
 
     { name: 'Open', value: '1' }, 
 
     { name: 'In Progress', value: '2' }, 
 
     { name: 'Complete', value: '3' }, 
 
     { name: 'Deleted', value: '4' }, 
 
    ]; 
 
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 
 
}

<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

來源

2014-10-15 09:48:05 vinodhkumar

你的努力是好的，但解決方案不起作用 –

$scope.item = { 
    "id": "3", 
    "name": "ALL", 
}; 

$scope.CategoryLst = [ 
    { id: '1', name: 'MD' }, 
    { id: '2', name: 'CRNA' }, 
    { id: '3', name: 'ALL' }]; 

<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>

來源

2015-01-22 14:14:22

而這個代碼解決了兩個OP問題中的哪一個？ – Zac

您可以（通過軌道）與下面的代碼做到這一點，

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>

來源

2015-02-02 10:02:57

這是一個老問題，喲你可能已經得到了答案。

我plnkr解釋了我的方法來實現選擇默認值下拉列表。基本上，我有一個服務，將返回下拉值[硬編碼測試]。我無法選擇默認值，幾乎花了一天，終於想通了，我應該在的script.js文件中設置$scope.proofGroupId = "47";而不是$scope.proofGroupId = 47;。這是我的不好，我沒有注意到我設置了一個整數47而不是字符串「47」。我保留了plnkr，以防萬一某些人想看到。希望這會對一個人有所幫助。

來源

2015-11-24 23:50:30 user007

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

這將讓你期望的結果老兄:)乾杯

來源

2016-02-18 12:03:22

使用Angularjs在選擇下拉菜單中設置默認值

回答

相關問題