来自带有angularjs的json的ng-options [英] ng-options from a json with angularjs

问题描述

我有一个看起来像这样的json

i got a json that looks like this

[{"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"]}]

现在我想做这样的事情。我有2个下拉菜单，我希望第一个用我的2个列表中的partner_name填充所以它必须看起来像这样

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

<select>
    <option value="8">Company1</option>
    <option value="9">Company2</option>
</select>

但是我希望它已经被我在中设置的值选中的service_id 。
我知道你可以这样做这样吗

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

<select ng-options="partner for partner in jsonPartners" ng-model="service_id"></select>

但是当我这样做时，我的选择2选项名为 [对象对象]

but when i do this, i have inside my select 2 options called [object Object]

第二次选择比较棘手，我希望它能够在我的第一个选择中选择id的位置。因此，如果我选择了 Company1 ，那么它应该用 Place1，Place2，Place3 填充，如果我选择 Company2 ，它应填充 Place4，Place5 。

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, Place3 and if i selected Company2, it should be filled with Place4, Place5.

谢谢你提前，丹尼尔！

推荐答案

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];
}

小提琴

这篇关于来自带有angularjs的json的ng-options的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！