Angularjs选择以选择数据传递

Angularjs Select to Select data passing

本文关键字：选择 Angularjs 数据      更新时间：2023-09-26

因此angularjs选择函数存在一些经验不足的问题。英雄联盟所以我有一个汽车程序，可以获取你的汽车信息。我有三个选择。品牌、型号和年份。我从JSON服务器获取所有这些信息。"Make"输入显示所有汽车制造（每个Make对象都有一个模型对象）。"模型"输入显示用户选择的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>

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

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

为了加载所选"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
          });
      }
    }
  });
});
相关文章：