ドロップダウンリストに表示するオブジェクトの配列を使用しようとしています。ここではJSONファイルドロップダウンリストのngRepeatで使用するオブジェクトの配列の使用/変更
私はCOUNTRYNAMEを使用して国がドロップダウンに表示され、値としてcountryIdを使用するために、そのドロップダウンリストを表示したいと思い{
"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"}]
}
]
}
です。
最初にいくつかのコードを試して、試したことを達成できない場合は質問してください。
ここでは、いくつかのコードを試したと仮定した場合の回答です。
使用select as
選択として：
モデルの選択式の結果を結合するselect asを使用
、しかしなり、HTML要素の値のいずれかindex (for array data sources)またはproperty name (for object data sources)コレクション内の値。式によるトラックが使用されている場合、その式の結果は、オプションおよび選択要素の値として設定されます。
<!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>select documentationをチェックしてください。角度はselect入力を行ういくつかの方法があります。
どのようにしても、JSファイルの$ scopeに "list"オブジェクトを保存する必要があります。例えば。 $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"のようなモデルにないカスタムフィールドを追加することは困難です。
あなたに仕事を依頼しているようです。あなたは質問していません。あなたはすでに何をしましたか？あなたは何を理解していますか？ –