ng-options duplicate error?

Question

I have enclosed my code I need to display

$scope.states="India";    
$scope.cities="Madhya Pradesh"; 
$scope.city="Ajmer";

These data in cascading dropdown when I am putting I am getting error I have enclosed my jsfiddle.

Expectation : Already selected india,Madhya Pradesh,Ajmer . I want to display this data in cascading dropdown

Code :

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
   $scope.states='India';
   $scope.cities='Maharashtra';
   $scope.city='Mumbai';
   
   $scope.countries = {
          'India': {
            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
          },
          'USA': {
            'Alabama': ['Montgomery', 'Birmingham'],
            'California': ['Sacramento', 'Fremont'],
            'Illinois': ['Springfield', 'Chicago']
          },
          'Australia': {
            'New South Wales': ['Sydney'],
            'Victoria': ['Melbourne']
          }
        };
   
   
        

        $scope.getCountry = function(val) {
          for (var key in $scope.countries) {
            if ($scope.countries.hasOwnProperty(key)) {
              if ($scope.countries[key] === val) {
                alert('You selected: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                alert('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          alert('You selected ' + city);
        };
  }]);

<div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select id="country" ng-model="states" ng-options="country for (country, states) in countries track by $index" ng-change="getCountry(states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      States:
      <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
        <option value=''>Select</option>
        <option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
      </select>
    </div>
  </div>
</div>

What error are u getting? Do you just need to display array item in list? — Navaneet, Aug 10 '15 at 14:17
[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: city in cities, Duplicate key: string:a, Duplicate value: a — , Aug 10 '15 at 14:22
U can't use $index in ngoption.(can use it with ng-repeat). Your fiddle gives error due to track by $index . Check http://stackoverflow.com/questions/23595034/removing-duplicates-from-angular-js-ng-options-ng-repeat to remove duplicates from ngOptions — Navaneet, Aug 10 '15 at 14:26

Vipul Agarwal · Accepted Answer · 2015-08-10T15:30:37.770

I would do it the below way:

JS:
1. Restructured your JSON Data.
2. Renamed your methods to depict their action.

angular.module('test', [])
  .controller('TestController', ['$scope','$filter',
      function($scope, $filter) {
      $scope.country="India";
      $scope.state="Rajasthan";
      $scope.city="Ajmer";

        $scope.countries = [
    {
        "name": "India",
        "states": [
            {
                "name": "Maharashtra",
                "cities": [
                    {"name":"Pune"},
                    {"name":"Mumbai"},
                    {"name":"Nagpur"},
                    {"name":"Akola"}
                ]
            },
            {
                "name": "Madhya Pradesh",
                "cities": [
                    {"name":"Indore"},
                     {"name":"Bhopal"},
                    {"name":"Jabalpur"}
                ]
            },
            {
                "name": "Rajasthan",
                "cities": [
                    {"name":"Jaipur"},
                    {"name":"Ajmer"},
                    {"name":"Jodhpur"}
                ]
            }
        ]
    },
    {
        "name": "USA",
        "states": [
            {
                "name": "Alabama",
                "cities": [
                    {"name":"Montgomery"},
                    {"name":"Birmingham"}
                ]
            },
            {
                "name": "California",
                "cities": [
                    {"name":"Sacramento"},
                     {"name":"Fremont"}
                ]
            },
            {
                "name": "Illinois",
                "cities": [
                    {"name":"Springfield"},
                    {"name":"Chicago"}
                ]
            }
        ]
    },
    {
        "name": "Australia",
        "states": [
            {
                "name": "NewSouthWales",
                "cities": [
                    {"name":"Sydney"}
                ]
            },
            {
                "name": "Victoria",
                "cities": [
                    {"name":"Melbourne"}
                ]
            }
        ]
    }
];

        $scope.getStates = function() {
            $scope.states = null;
            $scope.cities = null;
            console.log($scope.country);
            if($scope.country != null){
                var filteredCountry = $filter("filter")($scope.countries, $scope.country);
                if(filteredCountry != null && filteredCountry.length == 1){
                    $scope.states = filteredCountry[0].states;
                }             
            }
        };

        $scope.getCity = function() {
            $scope.cities = null;
          if($scope.state != null){
              var filteredState = $filter("filter")($scope.states, $scope.state);
                if(filteredState != null && filteredState.length == 1){
                    $scope.cities = filteredState[0].cities;
                }               
            }
        };

        if($scope.country != null){
            var filteredCountry = $filter("filter")($scope.countries, $scope.country);
            if(filteredCountry != null && filteredCountry.length == 1){
                 $scope.states = filteredCountry[0].states;

                var filteredState = $filter("filter")($scope.states, $scope.state);
                if(filteredState != null && filteredState.length == 1){
                    $scope.cities = filteredState[0].cities;
                } 
            }
        }

        $scope.alertCity = function() {
          alert('You selected ' + $scope.city);
        };
          //console.log($scope.countries);
  }]);

HTML:

    <div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      States:
      <select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()">
        <option value=''>Select</option>
      </select>
    </div>
  </div>
</div>

Hope this helps

ng-options duplicate error?

1 Answers1