Two Objects In Select Dropdown Using ng-model

Question

I'm currently taking an object and placing it into a select dropdown of 'Employees':

$scope.Employees = [{
    "id": 1,
        "name": "George",
        "job": "Janitor"..

.. which populates some data depending on the selection. Works great! Here is my current fiddle:

http://jsfiddle.net/3Hgy7/2/

<select ng-model="selectedOption" ng-options="option.name for option in Employees"></select>
<br>
<br>
<p>ID: {{selectedOption.id}}</p>
<p>JOB: {{selectedOption.job}}</p><br><pre>{{selectedOption}}</pre>

From the controller you can also see a 'Vehicles' object:

$scope.Vehicles = [{
    "id": 1,
        "employee_id": 1,
        "make": "Honda",
        "model": "Civic"...

I'd like to be able to include this into my dropdown selection somehow. So when someone selects a certain employee, their vehicles would be listed. I'm really not sure how to go about doing this. I know you can take both objects into the ng-model and add some ng-options.

http://jsfiddle.net/3Hgy7/3/

<select ng-model="selectedOption.Vehicles" ng-options="option.make for option in Vehicles"></select>

..Though I'm pretty sure this isn't correct whatsoever. Any help would be greatly appreciated. Please let me know if I need to provide more info!

Thanks! T

m.casey · Accepted Answer · 2014-07-15 15:53:26Z

1

You can do it like so:

<div ng-controller="MyCtrl">
<select ng-model="selectedOption" ng-options="option.name for option in Employees"></select>
<br>
<br>
<p>ID: {{selectedOption.id}}</p>
<p>JOB: {{selectedOption.job}}</p>
<br><pre>{{selectedOption}}</pre>

<div>
    <select class="form-control" ng-model="selectedVehicle" ng-options="v.make for v in Vehicles | filter:{employee_id: selectedOption.id}"></select>
</div>

Then your JavaScript as follows:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

$scope.Employees = [{
    "id": 1,
        "name": "George",
        "job": "Janitor"
    }, {
        "id": 2,
            "name": "Frank",
            "job": "Scientist"
    }, {
        "id": 3,
            "name": "Julie",
            "job": "Florist"
    }, {
        "id": 4,
            "name": "James",
            "job": "Teacher"
    }];
$scope.selectedOption = $scope.Employees[0];

$scope.Vehicles = [{
    "id": 1,
        "employee_id": 1,
        "make": "Honda",
        "model": "Civic"
    }, {
        "id": 2,
            "employee_id": 2,
            "make": "BMW",
            "model": "M3"
    }, {
        "id": 3,
            "employee_id": 4,
            "make": "Nissan",
            "model": "Pathfinder"
    }, {
        "id": 4,
            "employee_id": 2,
            "make": "Jaguar",
            "model": "XF"
    }];
}

Edit - Working Fiddle

answered Jul 15, 2014 at 15:53

m.casey

2,60919 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tdotcspot Over a year ago

Awesome! Thank you for the help! I also edited the above Fiddle in case someone wanted to just display the data instead of placing it in another dropdown. jsfiddle.net/WZrN7/1

Collectives™ on Stack Overflow

Two Objects In Select Dropdown Using ng-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related