javascript - ng-options from a json with angularjs - Stack Overflow

admin管理员组

文章数量:1355542

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

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>

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>

but when i do this, i have inside my select 2 options called [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, Place3 and if i selected Company2, it should be filled with Place4, Place5.

Thank you in advance, Daniel!

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

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>

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>

but when i do this, i have inside my select 2 options called [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, Place3 and if i selected Company2, it should be filled with Place4, Place5.

Thank you in advance, Daniel!

• javascript
• json
• angularjs

Share Improve this question Follow asked Nov 13, 2013 at 9:35 Pacuraru DanielPacuraru Daniel 1,20599 gold badges3131 silver badges5757 bronze badges 5

• pls can you show me what containing jsonPartners ? You have two selects and you want to after first changed populate second right ? – daremachine Commented Nov 13, 2013 at 9:41
• 1 try this jsfiddle – Prateek Commented Nov 13, 2013 at 9:42
• yes, the jsonPartners is the json i wrote on the begining of my post – Pacuraru Daniel Commented Nov 13, 2013 at 9:42
• ok i found the solution to my first problem, it looks like this <select ng-model="service_id" ng-options="partner.partner_id as partner.partner_name for partner in jsonPartners"></select> – Pacuraru Daniel Commented Nov 13, 2013 at 9:51
• @Pacuraru Daniel its for key = val in option like value = name text. Look at oficial documentation its good if you read that. docs.angularjs/api/ng.directive:select – daremachine Commented Nov 13, 2013 at 9:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

fiddle

I would add the ng-change to select 1st item by default:

JS controller

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

Demo Fiddle

本文标签： javascriptngoptions from a json with angularjsStack Overflow