angularjs - 预先输入对象数组？

Question

我在理解 AngularUI Bootstrap 的 Typeahead 指令时遇到了一些问题。在他们的 statesWithFlags 对象数组示例中，他们不一定解释指令表达式在说什么。

state as state.name for state in statesWithFlags | filter:{name:$viewValue}

友情链接 : http://angular-ui.github.io/bootstrap/#/typeahead

他们使用 state 两次，有人可以向我解释一下吗？以及解释过滤器到底在说什么？

例如，当我尝试使用一组对象创建一个对象并使用 Typeahead 处理该数据时，我似乎无法访问任何数据。

JSON

$scope.dataExample = {
  'students' : [
    {
      'id': 1,
      'name': 'John Doe'
    },
    {
      'id': 2,
      'name': 'Jane Doe'
    }
  ]
};

HTML

<input type="text" ng-model="selectedStudent" typeahead="student as students.name for student in dataExample | filter:{name:$viewValue}">

Answer 1

这个 typeahead 表达式与 ngSelect 上的 ngOptions 语法相同(在这个博客上有更多信息:http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/)。

它本质上是列表理解。您提供了一个用于预先输入的列表，用于填充选项、选择时将模型值设置为的对象以及选项的显示方式，语法如下:

modelValue as display for iterationItem in list

你的问题是“in dataExample”部分需要一个数组，但你给了它对象(你可以给它一个对象，但这不是你想要做的)。你要:

<input type="text" ng-model="selectedStudent" typeahead="student as student.name for student in dataExample.students | filter:{name:$viewValue}">

至于你的另一个问题，过滤器只是过滤输入前应该显示的选项。 $viewValue 是一个属性 typeahead 设置为用户输入的任何内容，过滤器将仅选择与该子字符串匹配的选项。