javascriptangularjsangularjs-forms

Change data in selectboxes angularjs


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?


Solution

  • 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