Get object data with 2 dropdown menus + update Issues

Question

In addition to this question I need to get the selected values to my AngularJS controller.
To use the same example like in the previous question let´s say you can select your destination with two drop-downs. You first select your country then you can choose a city. If you hit that Submit button the whole object should get passed to the controller. The whole object is needed due to the fact that the destination-object contains several attributes like uniqueID, currency or population (This case is just an example, don´t worry if the attributes doesn't make sense).
So to sum up: all of the objects data just be passed to the controller not just the two which are displayed at the GUI.
In the first step I just want to print the data on the console to see if all needed data was passed.

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

app.controller("MainCtrl", function($scope) {
  var vm = this;

  vm.message = "Select Your Destination";
  vm.data = [
    { city: 'Berlin',         country: 'Germany',  id: 'GerBer_01',   currency: 'EURO'},
    { city: 'Hamburg',        country: 'Germany',  id: 'GerHam_02',   currency: 'EURO'},
    { city: 'Munich',         country: 'Germany',  id: 'GerMun_03',   currency: 'EURO'},
    { city: 'New York',       country: 'USA',      id: 'UsaNY_04',    currency: 'DOLLAR'},
    { city: 'Whashington DC', country: 'USA',      id: 'UsaWDC_05',   currency: 'DOLLAR'},
    { city: 'Paris',          country: 'France',   id: 'FraPar_06',   currency: 'EURO'}
  ];
  
  $scope.submit = function(){  
    
    console.log($scope.city);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="AngularApp">
  <div ng-controller="MainCtrl as Main" class="container">
    <h1>{{Main.message}}</h1>
    <form>
      <div class="form-group">
        <label>Country</label>
        <select name="country_select" ng-model="country" class="form-control">
          <option ng-selected="$first" ng-repeat="option in Main.data | unique: 'country'" value="{{option.country}}">{{option.country}}</option>
        </select>
      </div>
      <div class="form-group">
        <label>City</label>
        <select name="city_select" ng-model="city" class="form-control">
   <option ng-selected="$first" ng-repeat="option in Main.data | filter:{country: country}" value="{{option}}">{{option.city}}</option>
</select>
      </div>
      <br />
      <button type="submit" class="btn btn-default" ng-click="submit()">Submit</button>
    </form>
  </div>
</body>

NOTE:
The selection of the country and city is buggy as you can see if you press the submit button the value of city will be undefined at the beginning despite of the fact that it is marked as selected in the code. Also if you change the country but the default-city stays the city value won´t be updated either.

EDIT

As @Ruhul suggested I changed my HTML to store the whole object in the value.

<select name="city_select" ng-model="city" class="form-control">
   <option ng-selected="$first" ng-repeat="option in Main.data | filter:{country: country}" value="{{option}}">{{option.city}}</option>
</select>

I also changed the submit method to only print the object to the console.

$scope.submit = function(){

  console.log($scope.city);
}

BUT
I still have problems with the initial value and the selected value. I will explain my problem a bit further:

Initial problem:

Reload the snippet
The drop-down shows country: Germany and city: Berlin
Press the submit button
Suggestion: the console shows the information of Berlin
Actual result: the console shows an undefined object

Change Problem

Click on country: USA and city: Washington
Click submit and the info of Washington is displayed in the console
Select ONLY the country France, don´t select a city. We´ll use the displayed default one: Paris
Click submit again
Suggestion: The information of Paris will be displayed due to the fact that it is selected in the lower drop-down
Actual Result: The information of Washington is displayed again: the city hasn´t been updated!

How to fix this issue?

score 1 · Accepted Answer · answered Aug 31 '16 at 07:11

Can you change your second select as shown below, you are missing "value"??:: Bye doing this you will have your entire object in ng-model="city"

    <select name="city_select" ng-model="city" class="form-control">
      <option ng-selected="$first" ng-repeat="option in Main.data | filter:{country: country}" value="{{option}}">{{option.city}}</option>
    </select>

Get object data with 2 dropdown menus + update Issues

1 Answers1