使用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>