Angularjs Select to Select data passing

Question

So having some inexperienced issues with angularjs select function. lol So i have a vehicle program that get info of your car. I have three select options. Make, Model, and Year. I grabbing all this info from a JSON Server. The 'Make' input shows all the car makes (every Make object has a model object). The 'Model' input shows all the models for the Make that the user has chosen. I dont know how to grab the data of the Make and show all the Models for that Make. (and then the Year).

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

so you need to dynamically change the other dropdowns according to the user selection? — Jossef Harush Kadouri
– Jossef Harush Kadouri, Commented Mar 28, 2015 at 19:33

Hieu TB · Accepted Answer · 2015-03-29 07:13:57Z

3

Please have a look at my example: http://jsfiddle.net/s7p0zavy/

Suppose I have the $scope.items as following:

$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']} 
                ]
      }
    ]
  }
];

Then I can display it information as below:

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

answered Mar 29, 2015 at 7:13

Hieu TB

1625 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hieu TB Over a year ago

I am glad I could help. Just one more thing, maybe you will want to use an 'ng-change' in the first 'select' (<select ng-model="make" ng-change=resetYearSelect() ng-option ......></select) to reset value of selected year in the third 'select'. Because as you can see in the example, you make a change in the first 'select', the third 'select' didn't update.

avivklas · Accepted Answer · 2015-03-28 19:42:30Z

0

In order to load models of a selected 'make', you have to bind a listener to the event of change in the select element and do the loading upon change.

For example:

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

answered Mar 28, 2015 at 19:42

avivklas

5857 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angularjs Select to Select data passing

2 Answers 2

1 Comment

HTML

JS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

HTML

JS

Comments

Your Answer

Sign up or log in

Post as a guest

Related