【问题标题】：Angularjs Select to Select data passingAngularjs选择选择数据传递
【发布时间】：2023-04-08 00:50:01
【问题描述】：

所以在使用 angularjs 选择功能时遇到了一些没有经验的问题。哈哈所以我有一个车辆程序可以获取您的汽车信息。我有三个选择。品牌、型号和年份。我从 JSON 服务器获取所有这些信息。 'Make' 输入显示所有汽车制造商（每个 Make 对象都有一个模型对象）。 'Model' 输入显示用户选择的 Make 的所有模型。我不知道如何获取 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>

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

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

$scope.formData = {};

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

【问题讨论】：

所以您需要根据用户选择动态更改其他下拉菜单？
@JossefHarush 我该怎么做？

标签： javascript html angularjs ng-options

【解决方案1】：

请看我的例子：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>

【讨论】：

我很高兴能帮上忙。还有一件事，也许你会想在第一个'select'中使用'ng-change' () 在第三个“选择”中重置所选年份的值。因为正如您在示例中看到的那样，您在第一个“选择”中进行了更改，第三个“选择”没有更新。

【解决方案2】：

为了加载选定“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" 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
          });
      }
    }
  });
});

【讨论】：