Search code examples
angularjsdrop-down-menuangularjs-scopeangularjs-ng-repeatangularjs-ng-options

AngularJs - ng-options object.object

I am displaying countries and cities in a select box in angularjs, which are working fine. ng-model of country displays the output when I call {{country}}. However ng-model of city couldn't be called as {{city}} with its modal name. I want to call it as {{city}} rather than {{city.city}}. Note, both select boxes are working fine except the modal of city, which couldn't be displayed {{city}}

Otherwise, can I obtain city results when I select country through ng-repeat rather than ng-options

<select name="Country" ng-model="country" class="item item-input item-select major" required>
                                    <option value=""> Select a Country  </option>
                                    <option ng-repeat="country in countries" value="{{country.iso_code_3}}">{{country.name}}</option>
                                </select>


    <select name="City" ng-model="city" data-ng-options="city.name for city in cities| filter:{CountryCode: country}:true" class="item item-input item-select major" required>
                                    <option value="">-- Select a City --</option>
                                </select>
Solution

  • Click this Demo example

    Html Code for reference:

     <html ng-app="myapp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js" data-require="angular.js@1.5.x"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <select ng-model="country" data-ng-options="country for country in countries" ng-change="countryChange()">
      <option value="">Select country</option>
    </select>
    <br>
    <select ng-model="state" ng-options="state for state in allStates">
      <option value="">Select state</option>
    </select>
    <br>
    Country: {{country}}
    <br>
    State: {{state}}
  </body>
</html>

    JS code for reference:

    var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.countries = ["USA","Canada"];
    $scope.states = [{
        "name": "Alabama",
        "countryId": "USA"
      }, {
        "name": "Alaska",
        "countryId": "USA"
      }, {
        "name": "Arizona",
        "countryId": "USA"
      }, {
        "name": "Alberta",
        "countryId": "Canada"
      }, {
        "name": "British columbia",
        "countryId": "Canada"
    }];

    $scope.countryChange = function(){
      $scope.allStates = [];
      angular.forEach($scope.states, function(value){
        if($scope.country == value.countryId){
          $scope.allStates.push(value.name);
        }
      });
    }
});