Typeahead对象数组？

Question

我在理解AngularUI Bootstrap的Typeahead指令时遇到了一些问题.在他们的statesWithFlags对象数组的例子中,它们不一定解释指令表达式所说的内容.

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

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

他们使用状态两次,有人可以向我解释一下吗？除了解释过滤器究竟是什么意思？

例如,当我尝试使用一个对象数组创建一个对象并使用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

这种预输入表达式是相同的语法上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

你的问题是,"在dataExample"部分想要一个数组,但你给它的对象(你可以给它一个对象,但是这不是你想要做什么).你要:

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

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