Как получить строку в $viewValue, когда пользователь ее вводит?

Я новичок в Angular и пытаюсь создать ввод с опережением, который отображает только результаты, которые начинаются с того, что печатает пользователь. Например, в моем плункере, когда пользователь вводит «n», отображаются все результаты, содержащие «n», а не только те, которые начинаются с буквы.

Я пытался получить $viewValue и сравнить его со списком результатов, которые могут быть показаны пользователю. Я также пытался просто увидеть текущее значение несколькими способами, включая {{$viewValue}} и т. д., но не сделал этого правильно.

Итак, в конечном счете, что мне нужно, чтобы иметь возможность просматривать и использовать (вероятно, в каком-то методе сравнения) строку, введенную в поле ввода с опережением ввода?

Ссылка на плункер: http://plnkr.co/edit/totEvAhdQcrx3yONLX6p?p=preview

 <body ng-controller="MainCtrl" class="container-fluid">
    <input type="text" class="form-control" placeholder="Centers loaded from local database"
        ng-model="selectedCenter"
        typeahead-min-length="2"
        typeahead="center as center.name for center in centers | filter:{state:$viewValue}"
        typeahead-template-url="typeahead-item.html" />
    <pre>{{selectedCenter | json}}</pre>
    input = {{$scope.viewValue}}
  </body>

Спасибо за любую информацию, которую вы можете предоставить.


javascript angularjs angular-ui angular-ui-typeahead
person Mike    schedule 28.10.2014    source источник
comment
Зачем голосовать против без объяснения причин? Если мне нужно что-то отредактировать, я это сделаю.   -  person Mike    schedule 29.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

ОБНОВЛЕНИЕ: я изначально неправильно понял вопрос (извините за это) - вам нужно выполнить сопоставление подстроки, чтобы проверить, начинается ли элемент списка с введенного запроса, а не содержит. Я соответствующим образом обновил код — теперь мы передаем пользовательскую функцию фильтру «фильтр» (см. таблицу аргументов в документации). Здесь я просто выполняю простое сопоставление подстроки - это фактически показало бы весь список в пустом запросе, если бы не ng-show. Пользовательская функция, которую вы используете, выполняется и принимает элемент массива в качестве аргумента — каждый элемент, для которого fn возвращает «true», включается в результат.

Что касается отображения списка, это хороший кандидат для "filter" Angular. . Однако, если вам нужно вызвать функцию, чтобы сделать вызов сервера, чтобы сначала заполнить список, ng-change будет работать.

Я написал быстрый и грязный пример, чтобы показать, о чем я говорю. ng-model для поискового запроса, фильтр, ng-show для скрытия списка, когда ваш запрос пуст, и ng-change для запуска простой функции, которая увеличивает счетчик «изменений». Я использую фильтр непосредственно в представлении, но вы также можете использовать его в своем коде через $filter service.

Примечание. всегда полезно обернуть любой примитив области действия в объект, чтобы он хорошо сочетался с наследованием. В приведенном ниже примере я использую синтаксис «контроллер как» для достижения этого, а не просто используя ng-модель = "запрос". В этом случае вы можете получить доступ к данным с вашего контроллера через «this.query».

angular.module('app', []).controller('MainController', function($scope) {
  var ctrl = this;
  ctrl.query = '';
  ctrl.list = ['foo', 'bar', 'baz', 'porcupine', 'gorilla', 'alpaca'];
  ctrl.changes = 0;

  this.beginsWith = function(val) {
    return (angular.lowercase(val.substr(0, ctrl.query.length)) 
           === angular.lowercase(ctrl.query));
  };
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>


<div ng-app="app" ng-controller="MainController as main">

  List is hidden by ng-show when query is empty so it only displays a match.
  <br>
  <b>Array:</b> {{main.list|json}}
  <br>
  <br>

  <input ng-change="main.changed()" type="text" ng-model="main.query">
  <label>Changes: {{main.changes}}</label>
  |
  <label>Current query text:</label><b>{{main.query}}</b>
  <ul>
    <li ng-show="main.query" ng-repeat="item in main.list|filter:main.beginsWith">{{item}}</li>
  </ul>

</div>

person jaawerth    schedule 28.10.2014
comment
Спасибо за ответ. В моем плункере я довольно хорошо разобрался со списком, теперь мне нужно показать пользователю только те результаты, которые начинаются с того, что он ввел в поле ввода, а не какие-либо результаты, содержащие их ввод в середине или конце. В вашем примере, если я наберу просто a, я бы хотел только альпаку, но также отображаются бар, баз и горилла. Может быть, ответ на этот вопрос находится в вашем посте, и он просто пролетел мимо меня? Спасибо еще раз. - person Mike; 29.10.2014
comment
Ах, извините, я думаю, что это было ошибкой понимания прочитанного с моей стороны. Если вы взглянете на документы, на которые я ссылаюсь выше, на фильтр фильтра, фильтр позволяет вам передать функцию для собственного сравнения, а не использовать их встроенное поведение. Функция выполняется для каждого элемента в коллекции и получает этот элемент в качестве параметра. Каждый элемент, для которого функция возвращает значение true, включается в результаты. Я обновлю свой фрагмент соответственно. - person jaawerth; 29.10.2014