Angularjs Выберите, чтобы выбрать передачу данных

Итак, у вас есть некоторые неопытные проблемы с функцией выбора angularjs. lol Итак, у меня есть автомобильная программа, которая получает информацию о вашей машине. У меня есть три варианта выбора. Марка, модель и год. Я беру всю эту информацию с сервера JSON. Вход '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;
});
});

javascript html angularjs ng-options
person Thomas Roberts    schedule 28.03.2015    source источник
comment
поэтому вам нужно динамически изменять другие раскрывающиеся списки в соответствии с выбором пользователя?   -  person Jossef Harush    schedule 28.03.2015
comment
@JossefHarush Как мне это сделать?   -  person Thomas Roberts    schedule 29.03.2015

Ответы (2)


arrow_upward
3
arrow_downward

Пожалуйста, взгляните на мой пример: 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>
person Hieu TB    schedule 29.03.2015
comment
Я рад, что смог помочь. Еще одна вещь, возможно, вы захотите использовать «ng-change» в первом «выборе» (‹select ng-model=make ng-change=resetYearSelect() ng- option ......›‹/select) для сброса значения выбранного года в третьем 'select'. Поскольку, как вы можете видеть в примере, вы вносите изменения в первый «выбор», третий «выбор» не обновляется. - person Hieu TB; 30.03.2015

arrow_upward
0
arrow_downward

Чтобы загрузить модели выбранной марки, вы должны привязать прослушиватель к событию изменения в элементе выбора и выполнить загрузку при изменении.

Например:

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
          });
      }
    }
  });
});
person avivklas    schedule 28.03.2015