使用 ng-model 选择下拉列表中的两个对象

Question

我目前正在获取一个对象并将其放入“员工”的选择下拉列表中：

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

.. 根据选择填充一些数据。效果很好！这是我目前的小提琴：

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>

您还可以从控制器中看到“车辆”对象：

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

我希望能够以某种方式将其包含在我的下拉选择中。因此，当有人选择某个员工时，他们的车辆将被列出。我真的不知道该怎么做。我知道您可以将这两个对象放入 ng-model 并添加一些 ng-options。

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

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

..虽然我很确定这是不正确的。任何帮助将不胜感激。如果我需要提供更多信息，请告诉我！

谢谢！ T

Answer 1

你可以这样做：

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

那么你的JavaScript如下：

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

编辑 - Working Fiddle