ng-options from a json with angularjs

ng-options from a json with angularjs

本文关键字：with angularjs json from ng-options      更新时间：2023-09-26

我得到了一个看起来像这样的 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"]}]

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

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

但是我希望它已经被选中，并在service_id中设置了值。我知道你可以像这样以某种方式做到这一点 

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

但是当我这样做时，我的选择 2 个选项称为 [object Object]

第二个选择更棘手，我希望它在我的第一个选择中具有选择的 id 的位置。因此，如果我选择了Company1，那么它应该填充Place1, Place2, Place3，如果我选择了Company2，它应该填充Place4, Place5。

提前谢谢你，丹尼尔！

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

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.jsonPartners = [{"partner_id":"8", ..},{"partner_id":"9", ..}]
    $scope.service_id = $scope.jsonPartners[1];
}

小提琴

我会添加默认选择第一项ng-change：

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

<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>

演示小提琴

相关文章：