javascript 来自带有 angularjs 的 json 的 ng-options
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19950165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-options from a json with angularjs
提问by Pacuraru Daniel
i got a json that looks like this
我有一个看起来像这样的 json
[{"partner_id":"8","partner_name":"Company1","partner_location":["Place1","Place2","Place3"],"partner_user":["User1","User2","User3"]},{"partner_id":"9","partner_name":"Company2","partner_location":["Place4","Place5"],"partner_user":["User4","User5"]}]
Now i want to do something like this. I have 2 dropdowns and i want the first one to be filled with the partner_name from my 2 lists so it has to look like this
现在我想做这样的事情。我有 2 个下拉列表，我希望第一个用我的 2 个列表中的 partner_name 填充，所以它必须看起来像这样
<select>
<option value="8">Company1</option>
<option value="9">Company2</option>
</select>
but i want it to be selected already with a value that i set inside service_id.
I understand you can do this somehow like this
但我希望它已经被选中，我在里面设置了一个值service_id。我知道你可以像这样以某种方式做到这一点
<select ng-options="partner for partner in jsonPartners" ng-model="service_id"></select>
but when i do this, i have inside my select 2 options called [object Object]
但是当我这样做时，我在我的选择 2 个选项中调用了 [object Object]
And the 2nd select is more tricky, i want it to have the locations of what the id was selected in my 1st select. So if i selected Company1, than it should be filled with Place1, Place2, Place3and if i selected Company2, it should be filled with Place4, Place5.
第二个选择更棘手，我希望它具有在我的第一个选择中选择的 id 的位置。因此，如果我选择了Company1，则应该填充，Place1, Place2, Place3如果我选择了Company2，则应该填充Place4, Place5。
Thank you in advance, Daniel!
提前谢谢你，丹尼尔！
回答by AlwaysALearner
HTML
HTML
<div ng-app="myApp" ng-controller="ctrl">
<select ng-options="partner as partner.partner_name
for partner in jsonPartners" ng-model="service_id"></select>
<select ng-options="place for place in service_id.partner_location"
ng-model="service_location"></select>
</div>
JS
JS
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.jsonPartners = [{"partner_id":"8", ..},{"partner_id":"9", ..}]
$scope.service_id = $scope.jsonPartners[1];
}
回答by Maxim Shoustin
I would add the ng-changeto select 1st item by default:
ng-change默认情况下，我会添加以选择第一项：
JS controller
JS控制器
$scope.jsonPartners = [{
"partner_id": "8",
"partner_name": "Company1",
"partner_location": ["Place1", "Place2", "Place3"],
"partner_user": ["User1", "User2", "User3"]
}, {
"partner_id": "9",
"partner_name": "Company2",
"partner_location": ["Place4", "Place5"],
"partner_user": ["User4", "User5"]
}];
$scope.partner = $scope.jsonPartners[0];
$scope.place = $scope.partner.partner_location[0];
$scope.onChange = function(partner){
$scope.place = partner.partner_location[0];
}
HTML
HTML
<div ng-controller="fessCntrl">
<select ng-model="partner"
ng-options="partner as partner.partner_name for partner in jsonPartners"
ng-change="onChange(partner)"
></select>
<select ng-model="place"
ng-options="place as place for place in partner.partner_location"
></select>
</div>
Demo Fiddle
演示 Fiddle
