使用AngularJS在SELECT中创建的空字符串的空白选项

Question

我已经创建了一个angularjs选择框，该框将根据选择框中的选定值过滤表中的结果。

现在，使用对象" user ['location'']创建选择框，该框具有键。另外，一旦加载页面，我就会抓住默认用户位置'$ {City}'，然后将其传递到我的选择框，然后在表中相应地过滤结果。

如果用户的当前位置与我的选择框中的任何选项不匹配，则不应应用任何过滤器！

对于例如，如果用户位置为"伦敦"，因为我的对象中没有像"伦敦"中的那样，它应该选择第一个选项 - "选择城市"。

但是当前它正在创建一个像<option value= "? string:London ?"></option>之上的空字符串，并且正在选择它！

如何修复？

这是我的代码：

html：

<select class="form-control" ng-model="user.loc" ng-init="user.loc = '${city}'">
  <option value="" ng-selected="!checkKey(user.loc)">Select City</option>            
  <option value="{{key}}" ng-selected="key == user.loc" ng-repeat="(key, value) in user['location']">{{key}}</option> 
</select>

JS：

$scope.user['location'] = {Sydney: 5, Hong Kong : 7, NYC : 3, Toronto: 1};
$scope.checkKey = function(loc) {
  if(loc in $scope.user['location']){
    return true;
  } else {
    return false;
  }            
};

Answer 1

我想我知道您在这里想做什么。但是，与其使用checkKey检查值，而是在加载控制器时可以执行一次。

另外，您可以利用ngoptions在选择框中渲染可用选项。

angular.module('myapp', [])
  .controller('myctrl', function($scope) {
    $scope.user = {};
    $scope.user['location'] = {
      'Sydney': 5,
      'Hong Kong': 7,
      'NYC': 3,
      'Toronto': 1
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <select class="form-control" ng-model="user.loc" ng-init="user.loc = user.location['London']" ng-options="value as key for (key, value) in user.location">
  <option value="">Select City</option>
</select>
</div>

您可以像这样做自己的价值更改 ng-init，并且应该对其进行正常工作。

Answer 2

好吧，我尝试了此操作！

<select class="form-control" ng-model="user.loc">
  <option value="" ng-selected="!checkKey(user.loc)">Select City</option>            
  <option value="{{key}}" ng-selected="key == '${city}'" ng-repeat="(key, value) in user['location']">{{key}}</option> 
</select>