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

How to grab the string in $viewValue as the user is typing it in?

本文关键字：字符串 viewValue 获取 用户 输入      更新时间：2023-09-26

我是Angular的新手，正在尝试创建一个只显示以用户键入内容开头的结果的预编输入。例如，在我的plunker中，当用户键入"n"时，所有带"n"的结果都会显示出来，而不仅仅是以字母开头的结果。

我一直试图获取$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>

感谢您提供的任何见解。

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

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

我写了一个又快又脏的例子来说明我在说什么。搜索查询的ng模型、过滤器、当查询为空时隐藏列表的ng show，以及触发一个递增"changes"计数器的简单函数的ng change。我直接在视图中使用过滤器，但您也可以通过$filter服务在代码中使用它。

注意：将作用域上的任何基元包装在对象中总是一个好主意，这样继承就很好了——在下面的示例中，我使用"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>

相关文章：