限制数据列表值 - AngularJS

Question

我正在尝试使用AngularJS中的DataList渲染大约2000个值（通过API调用）。问题是这些值使页面变得如此缓慢。有没有办法我一次只能渲染10个项目，因为它是一个数据列表，当我们输入时，可能会将匹配结果显示为10个。

这是我的代码：https://codepen.io/anon/pen/KyEXMr

<main ng-app="myApp">
  <section ng-controller="dataListController">
    <form name="some">
      <label> Search
   <input type="text" list="dataList">
      </label>
      <datalist id="dataList">
        <option ng-repeat="v in names" value="{{v.eyeColor}}">Age {{v.age}}</option>
      </datalist>
    </form>
  </section>
</main>

Answer 1

您可以向选项属性添加ng-if="$index < 10"。这将仅使用小于10的索引呈现项目，并且仍将尊重您的文本过滤器。 LimitTo返回一个只包含10个项目的新数组，导致文本过滤器找不到您的项目。