使用/修改在ngRepeat下拉列表中使用的對象數組

我想使用一個對象數組來顯示在下拉列表中。這裏是JSON文件使用/修改在ngRepeat下拉列表中使用的對象數組

{ 
"list": [ 
{ 
"product": "Test1 ", 
"Name": "Test 1 Name", 
"countries": [{"countryId": 53,"countryName": "Unites States"}] 
}, 
{ 
"product": "Test 2", 
"Name": "Test 2 Name", 
"countries": [{"countryId": 54,"countryName": "Canada"}] 
}  
] 

}

我想顯示一個下拉列表是使用國家名稱的國家在下拉菜單來顯示和使用countryId的價值。

來源

2016-11-09 bumblebee

它看起來像你問人們爲你做的工作。你不是在問一個問題。你已經做了什麼？你不明白什麼？ –

你應該先嚐試一些代碼，如果你未能實現你所嘗試的，然後問一個問題。

這是一個假設你嘗試了一些代碼的答案。

使用select as

選擇爲：

使用select as將選擇表達該模型的結果結合，但與HTML元素的值將是任一index (for array data sources)或的property name (for object data sources)集合中的價值。如果使用通過表達式的軌道，則該表達式的結果將被設置爲選項的值並選擇元素。

This is the reference

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<select ng-options="item.countries[0].countryId as item.countries[0].countryName for item in records.list" ng-model="selected"> 
 
    <option value="">Select</option> 
 
    </select> 
 

 

 
<script> 
 
var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = { 
 
"list": [ 
 
{ 
 
"product": "Test1 ", 
 
"Name": "Test 1 Name", 
 
"countries": [{"countryId": 53,"countryName": "Unites States"}] 
 
}, 
 
{ 
 
"product": "Test 2", 
 
"Name": "Test 2 Name", 
 
"countries": [{"countryId": 54,"countryName": "Canada"}] 
 
}  
 
] 
 

 
} 
 

 
}); 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-11-09 14:30:53 Sravan

退房的select documentation。 Angular有一些方法可以做select輸入。

任何你這樣做的方式，你都需要在你的JS文件中保存「list」對象到$ scope。例如。 $scope.list = [...]

然後，在做選擇的一種方式是使用ng-options：

<select ng-options="item.name for item in list track by item.product" ng-model="userChoice"></select>

你的另一個選擇是在常規選項標籤使用NG-重複：

<select ng-model="userChoice"> 
<option ng-repeat="item in list" value="item.product">{{item.name}}</option> 
</select>

這些都是大致相當，但不完全。您會發現，如果您使用ng-repeat，則很難選擇「默認」選項。如果使用ng-options，則很難添加不在模型中的自定義字段，如「other」或「none」。

來源

2016-11-09 14:47:38 Stafree

使用/修改在ngRepeat下拉列表中使用的對象數組

回答

相關問題