Double select angular-js ajax

Question

I'm trying to retrieve the first selected value and then run an ajax call to get the 2nd set of data based on the first selected selected value.

HTML:

<label class="item item-input item-select">
  <div class="input-label">
   Select First:
   </div>

   <select>
    <option  ng-repeat="object in objects" value="object.ID">{{object.value}}</option>
   </select>
</label>

<label class="item item-input item-select">
  <div class="input-label">
   Select 2nd:
  </div>

  <select>
  <option></option>
  </select>
</label>

Controller Side:

...
dataFactory.getRequestObject(ID).then(function(resp2){
      console.log("Getting data to populate select list!");
      console.log(resp2.data);
      $scope.objects= resp2.data;

    }, function(err){
        console.error('ERROR', err);
    });

Where getRequestObject(ID) is my function which calls my webservice.

I'm able to get my first set of data, I would like to get the "value" of the first and invoke the retrieving of the 2nd select list of data. How would I go around doing it?

Josh Lin · Accepted Answer · 2015-10-19 07:16:28Z

1

$.getJson(url, param, function(data) {
  $scope.array1 = data.array;
});
$scope.onchange = function() {
  //ng-model will store its value into $scope
  var selectValue1 = $scope.selectValue1;
  
  $.getJson(url2, param2, function(data) {
    $scope.array2 = data.array;
  });
};

<select ng-module="selectValue1" ng-options="label for value in array1" ng-change="onchange()"></select>
<select ng-module="selectValue2" ng-options="label for value in array2"></select>

use $watch to detect selectValue change will also work

edited Oct 19, 2015 at 7:16

answered Oct 15, 2015 at 8:44

Josh Lin

2,44514 silver badges21 bronze badges

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

5 Comments

Gene Over a year ago

Hi, how do i get the value from the first select statement?

Josh Lin Over a year ago

$scope.selectValue is the value of first select as assigned in ng-module

Gene Over a year ago

Hi, they would require a ng-model. How am i supposed to go around doing it?

Josh Lin Over a year ago

if not get used to angular u can use $('#select1').change(function(){AJAX AND INIT SELECT2});$('#select2').change(function(){ var p = $('#select1').val();var p2=var p = $('#select2').val(); YOUR CODE HERE})

Josh Lin Over a year ago

added get ngModel values, still suggest using ngOptions replace <option ng-repeat="object in objects" value="object.ID">{{object.value}}</option>

Collectives™ on Stack Overflow

Double select angular-js ajax

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related