获取对象数据与2下拉菜单+更新问题

Get object data with 2 dropdown menus + update Issues

本文关键字：更新新问题下拉菜单取对象数据获取更新时间：2023-09-26

除了这个问题，我还需要将选择的值获取到我的AngularJS控制器。
为了使用与上一个问题相同的示例，假设您可以通过两个下拉框选择目的地。你首先选择你的国家，然后选择一个城市。如果你按下Submit按钮，整个对象就会传递给控制器。整个对象是需要的，因为目标对象包含几个属性，如uniqueID, currency或population(这种情况只是一个例子，如果属性没有意义也不用担心)。
综上所述:所有对象的数据都传递给控制器，而不仅仅是在GUI上显示的两个。
在第一步中，我只想在控制台上打印数据，看看是否传递了所有需要的数据。

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>

注意:
国家和城市的选择是有bug的，因为你可以看到，如果你按下submit按钮，city的值在开始时将是undefined，尽管事实上它在代码中被标记为selected。此外，如果您更改国家/地区，但默认城市保持不变，则city值也不会更新。

编辑

正如@Ruhul建议的那样，我改变了我的HTML，将整个对象存储在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>

我还将submit方法更改为仅将对象打印到控制台。

$scope.submit = function(){
  console.log($scope.city);
}

我仍然有问题的初始值和选择的值。我将进一步解释我的问题:

初始问题:

重新加载代码段
下拉列表显示国家:德国和城市:柏林
按submit键
建议:控制台显示柏林
实际结果:控制台显示undefined对象

变化问题

点击国家:美国和城市:华盛顿
单击submit，控制台显示华盛顿的信息
选择只选择国家France，不选择城市。我们将使用显示的默认值:Paris
再次点击submit
建议:由于下拉框
实际结果:再次显示华盛顿的信息:城市尚未更新!

如何解决这个问题?

你能改变你的第二个选择如下所示，你缺少"value"??：：再见，你将有你的整个对象在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>