使用AngularJS在select中创建的带有空字符串的空白选项

Question

我创建了一个angularJS选择框，该框将根据选择框中的所选值过滤表中的结果。

现在，使用具有位置作为键的对象'us​​er ['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>