Question

除this问题外，我还需要将选定值输入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>

注意：
选择国家/地区和城市是错误的，因为您可以看到，如果您按submit按钮，city的值将在undefined开头为selected，尽管它被标记为代码中的city。此外，如果您更改国家/地区但默认城市仍然保留value值也不会更新。

修改

正如@Ruhul建议我更改了HTML以将整个对象存储在<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

BUT
我仍然遇到初始值和所选值的问题。我会进一步解释我的问题：

初始问题：

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

更改问题

点击国家：美国和城市：华盛顿
单击submit，并在控制台中显示华盛顿的信息
选择仅国家/地区法国，不要选择城市。我们将使用显示的默认值：Paris
再次点击NSURL *url = [NSURL URLWithString:@"http://192.168.1.37:8000/sap/opu/odata/sap/ZGW_BANK_DATA_SRV/BankSet?$filter=(BankCtry%20eq%20%27CH%27)&$format=json"]; NSMutableURLRequest *request= [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:120.0]; NSString *authStr = [NSString stringWithFormat:@"%@:%@", @"abaper", @"initial@xyz"]; NSData *authData = [authStr dataUsingEncoding:NSUTF8StringEncoding]; NSString *authValue = [NSString stringWithFormat:@"Basic %@", [authData base64EncodedStringWithOptions:0]]; [request setValue:authValue forHTTPHeaderField:@"Authorization"]; NSError *error ; NSHTTPURLResponse *responseCode = nil; NSData *oResponseData = [NSURLConnection sendSynchronousRequest:request returningResponse:&responseCode error:&error]; if([responseCode statusCode] != 200) { NSLog(@"Error getting %@, HTTP status code %li", url, (long)[responseCode statusCode]); } else{ NSDictionary *responsedata = [NSJSONSerialization JSONObjectWithData:oResponseData options:NSJSONReadingAllowFragments error:&error]; NSLog(@"%@",response data); }
建议：由于在下拉列表中选择了巴黎的信息，将显示巴黎的信息
实际结果：华盛顿的信息再次显示：城市未更新！

如何解决此问题？

Answer 1

你可以改变你的第二个选择，如下所示，你缺少＆＃34;值＆＃34; ?? :: 再见，你将把你的整个对象放在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>

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

1 个答案: