Почему этот код angular-ui TypeAhead возвращает все элементы вместо отфильтрованных?

Я пробую директиву angular-ui typeahead. Желаемый результат: в поле ввода должны отображаться только отфильтрованные элементы на основе того, что было введено. Мой код отображает все элементы.

Я создал планкер для кода по адресу http://plnkr.co/edit/8uecuPiVqmEy6gFQYeXC.

Что с этим не так? Большое спасибо.

На тот случай, если вы не можете получить доступ к plunker, соответствующий html-код выглядит следующим образом:

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <h4>Testing angular-ui Typeahead</h4>
    <!-- <pre>Model: {{asyncSelected | json}}</pre> -->
    <input type="text" ng-model="typeahead" typeahead="names for names in getName($viewValue) " class="form-control">    
</div>

Соответствующий код JS выглядит так:

function TypeaheadCtrl($scope, $http) 
{
  // Any function returning a promise object can be used to load values asynchronously  
  $scope.getName = function(val) 
  {
    return $http.get('test.json') 
    .then(function(res)
    {
        var names = [];
        angular.forEach(res.data, function(item)
        {
            names.push(item.name);
        });
        return names;
    });
  };
}

Файл json из http get выглядит так:

[
{
    "name": "Tom"   
},
{
    "name": "Tom2"  
}
]

javascript angularjs typeahead angular-ui angular-ui-typeahead
person user781486    schedule 21.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку вы всегда возвращаете нефильтрованный массив, скорее всего, это можно сделать на стороне сервера, но если массив статичен, вы можете сделать это, как показано ниже:

http://plnkr.co/edit/kxOlmnjGA7wX7zhS67aK?p=preview

angular.module('plunker', ['ui.bootstrap']);

function TypeaheadCtrl($scope, $http) {
  // Any function returning a promise object can be used to load values asynchronously  
  $scope.getName = function(val) {
    return $http.get('test.json')
      .then(function(res) {
        var names = [];
        angular.forEach(res.data, function(item) {
          if (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1) {
            names.push(item.name);
          } else {
            console.log(item);
          }
        });
        return names;
      });
  };
}
person sylwester    schedule 21.05.2014
comment
Могу я спросить ваше мнение, было бы лучше сделать фильтрацию на стороне сервера или с помощью внешнего интерфейса angularjs? - person user781486; 21.05.2014
comment
Зависит от того, сколько данных у вас есть, но обычно лучше на стороне сервера, чтобы уменьшить объем данных, передаваемых с сервера на клиент. - person sylwester; 21.05.2014