Question

我是Angular的新手，我正在尝试创建一个输入，它只显示以用户输入内容开头的结果。例如，在我的plunker中，当用户键入＆＃39; n＆＃39;时，所有结果都是＆＃39; n＆＃39;在它们中出现，而不仅仅是那些以字母开头的那些。

我一直试图抓取$ viewValue并将其与可以向用户显示的结果列表进行比较。我还尝试过以多种方式查看当前值，包括{{$ viewValue}}等，但是没有正确地这样做。

最终，我需要能够查看和使用（在某种比较方法中）输入到预先输入框的字符串吗？

Plunker链接：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>

感谢您提供的任何见解。

Answer 1

更新：我最初误读了这个问题（抱歉） - 您需要进行子字符串匹配以检查列表项是否以输入的查询开头，而不是 contains 。我相应地更新了代码 - 我们现在将自定义函数传递给“过滤器”过滤器（请参阅文档中的参数表）。在这里，我只是做一个简单的子串匹配 - 如果不是ng-show，这实际上会在空白查询中显示整个列表。您使用的自定义函数将被执行并将数组元素作为参数 - 结果中包含fn返回“true”的每个项目。

至于显示列表，这是Angular的"filter" filter的一个很好的候选者。如果您需要触发一个函数来进行服务器调用以首先填充列表，那么ng-change将起作用。

我写了一些快速而肮脏的例子来展示我在说什么。用于搜索查询的ng-model，用于在查询为空时隐藏列表的过滤器，ng-show，以及用于触发增加“更改”计数器的简单函数的ng-change。我将过滤器直接用于视图，但您也可以通过$filter service在代码中使用它。

注意：将一个原语包装在一个对象的范围内总是一个好主意，这样它就可以很好地继承 - 在下面的例子中我使用“controller as”语法来完成这个，而不是仅使用ng-model =“query”。在这种情况下，您可以通过“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>

如何在用户输入时在$ viewValue中获取字符串？

1 个答案: