Angularjs Select 到 Select 数据传递

Question

所以在 angularjs select 功能方面遇到了一些缺乏经验的问题。哈哈所以我有一个车辆程序可以获取您的汽车信息。我有三个 select 选项。品牌、型号和年份。我从 JSON 服务器获取所有这些信息。 'Make' 输入显示所有汽车制造（每个 Make 对象都有一个模型对象）。 'Model' 输入显示用户选择的品牌的所有型号。我不知道如何获取 Make 的数据并显示该 Make 的所有模型。（然后是年份）。

HTML

<label class="item item-input item-select">
    <div class="input-label">
        Make
    </div>
    <select ng-model="make" ng-options="item.name for item in items.makes">
    </select>
</label>

JS

.controller('MilesCtrl', function($scope, vehicle, x2js, $http) {

/////////MY VEHICLE///////////

$scope.formData = {};

vehicle.getCar().then(function(data){
    console.log(data.data);
    $scope.items = data.data;
});
});

Answer 1

为了加载 selected 'make' 的模型，您必须将侦听器绑定到 select 元素中的更改事件，并在更改时加载。

例如：

HTML

<label class="item item-input item-select">
    <div class="input-label">
        Make
    </div>
    <select ng-model="make" ng-options="item.name for item in items.makes" ng-change="onMakeChanged">
    </select>
</label>

JS

.controller('MilesCtrl', function($scope, vehicle, x2js, $http) {

    function onMakeChanged(){
      if ($scope.make){
        $http.get('/get_models', { make: $scope.make.id})
          .success(function(data, status, headers, config){
            //render models
          });
      }
    }
  });
});

Answer 2

请看我的例子：http://jsfiddle.net/s7p0zavy/

假设我有 $scope.items 如下：

$scope.items = [
  {
    makes: [
      {name: 'make01', 
        models: [ 
                {name:'model0101', years:['111','112']}, 
                {name:'model0102', years:['121', '122']} 
                ]
      },
      {name: 'make02', 
        models: 
                [ 
                {name:'model0201', years:['211','212']}, 
                {name:'model0202', years:['221', '222']} 
                ]
      }
    ]
  }
];

然后我可以显示如下信息：

<div class="input-label">Make</div>
<select ng-model="make" ng-options="item as item.name for item in items[0].makes"></select>

<div class="input-label">Model</div>
<select ng-model="model" ng-options="item as item.name for item in make.models"></select>

<div class="input-label">Year</div> 
<select ng-model="year" ng-options="item for item in model.years"> </select>

Angularjs Select 到 Select 数据传递

Angularjs Select to Select data passing

javascript

html

angularjs

ng-options

HTML

JS