0

I have 3 different selectboxes at my page. If I chose an option In the first selectbox, I want the options In the second selectbox to change to options that belongs to the value that you selected in the first selectbox.

I want the same thing with the third selectbox. If I chose an option the second selectbox, I want the options in the third selectbox to change to the toptions that belongs to the value in the second.

Any suggestions how to do this as simple as possible in AngularJS?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
user500468
  • 1,183
  • 6
  • 21
  • 36

4 Answers4

1

You could achieve this by using ng-options with angular filters

Controller

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.countries = {
      'India': {
        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
      },
      'USA': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
      },
      'Australia': {
        'New South Wales': ['Sydney', 'Orange', 'Broken Hill'],
        'Victoria': ['Benalla', 'Melbourne']
      }
    };
  })

Markup

 <div ng-controller="Ctrl">
    <div class="container">>
      <div class="form-group">
        <label class="control-label" for="Country">Country:</label>
        <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="States">States:</label>
        <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="City">City:</label>
        <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
      </div>
    </div>
  </div>

Working Plunkr

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Hii @pankajparkar... Do you know angularjs well.. i have a small doubt in angularjs.. can you please help me.. – phpfresher Apr 14 '15 at 07:35
  • @phpfresher yes you can ask – Pankaj Parkar Apr 14 '15 at 07:36
  • Thank you... Am doing the countries, states and cities code using angularjs... Everything is working fine, but what i want is, when there are no records for the selected "country" in the DB, a textbox should be displayed in the place of "state" and "city" instead of select boxes.. Am not clear how to do it.. Can you please give me a suggestion of how to do it.. – phpfresher Apr 14 '15 at 07:44
  • basically you need check that selected country has states or not if there is not countries the show text box otherwise hide textbox, you could achieve this using `ng-show` / `ng-if` – Pankaj Parkar Apr 14 '15 at 07:50
  • I did like this.. but its displaying the textbox itself and not showing the select box.. is there anything wrong in this ??? `` `` – phpfresher Apr 14 '15 at 08:04
0

Just use ng-change directive, and call function from your controller to do any logic you want.

<select "ng-change"="item_change(selectedItem)" "ng-model"="selectedItem" "ng-options"="item.id as item.name for item in items">
saygon91
  • 116
  • 5
0

Html:

<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="sct.js"></script>
</head>

<body >
<div ng-controller="MyCtrl">
<select ng-model='selectedNumber' ng-change="adv(selectedNumber);" ng-options='number for number in numbers'></select>
 num:   {{selectedNumber}}
<select ng-model='selected' ng-options="number for number in numbers">   </select>
num:   {{selected}}
<button ng-click="add()" >add</button>
</div>
</body>
</html>

JS:

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {    
$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
$scope.num = angular.copy($scope.numbers);
$scope.selectedNumber = $scope.numbers[0];
//$scope.selected = $scope.num[0];

$scope.add=function(){
$scope.num = angular.copy($scope.numbers);
}

$scope.adv = function(selectedNumber){
$scope.num = angular.copy($scope.numbers);
$scope.selected = $scope.numbers[selectedNumber -1]; 
//var a = $scope.num.splice(selectedNumber-1, 1);  
}

$scope.num = angular.copy($scope.numbers);
});

Hoping it will help you

Reena
  • 1,109
  • 8
  • 16
0

Here am posting the code of countries, states and cities... Just as the same you wanted...

Just create the state.php and city.php and output the data in json format.. 

<script type="text/javascript" src="angular.min.js">
    var app=angular.module("placesApp",[]); //Angular JS App
        app.controller("placesController",["$scope","$http",function($scope,$http){
    $http.get("country.php").success(function(response) //Get Countries from country.php
      {
    $scope.countries=response; //Store the data/response in a variable
      });

    $scope.getStates=function()
            {
                $http.post('state.php',{countryId:$scope.places.country}).success(function(data)
                {
                    $scope.states=data;
                });
            }
    $scope.onStateChange=function()
        {
            $http.post("city.php",{stateId:$scope.places.state}).success(function(data)
            {
                if(data!="")
                {                   
                    $scope.cities=data;
                }
            });
        }

        $scope.submitForm = function()
        {
            $scope.submitted = true;
        }
    }]);
</script>
    <body ng-app="placesApp">
<div ng-controller="placesController">
<form name="placesForm" id="placesForm" method="post" action="">
Countries:<select name="country" id="country" ng-model="places.country" ng-required="true" ng-change="onCountryChange()" ng-options="cou.CountryId as cou.CountryName for cou in countries">
                        <option value="">Select Country</option>
                    </select>
States: <select name="state" id="state" ng-model="places.state" ng-required="true" ng-change="onStateChange()" ng-options="sta.StateId as sta.StateName for sta in states">
                        <option value="" style="display:none;">Select State</option>
                    </select>
Cities:<select name="city" id="city" ng-model="places.city" ng-required="true" ng-options="cit.CityId as cit.CityName for cit in cities">
                        <option value="" style="display:none;">Select City</option>
                    </select>
<input type="submit" name="submit" id="register" value="Submit" ng-click="submitForm()">
</form>
</div>
</body>
</html>
phpfresher
  • 310
  • 1
  • 12