Пустой параметр с пустой строкой, созданной при выборе с использованием AngularJS

Я создал поле выбора 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;
  }            
};

javascript object angularjs key-value angularjs-select
person Sunny    schedule 01.12.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, я понимаю, что вы пытаетесь здесь сделать. Но вместо того, чтобы проверять значения с помощью 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 на свое значение, как вы это делали, и оно должно нормально с ним работать.

person 31piy    schedule 01.12.2017
comment
Спасибо, попробовал то же самое немного по другому, получилось :) - person Sunny; 01.12.2017

arrow_upward
0
arrow_downward

Хорошо, я попробовал это, и это сработало!

<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>
person Sunny    schedule 01.12.2017