AngularJS ng-options/Typeahead 表达式语法

Question

我试图用 ng-options 或 Typeahead 表达式语法找到 AngularJS select，但我无法在一个地方找到全部内容，所以我到处收集信息这就是我想出的：

Answer 1

表达式语法（这是完整的语法，大部分是可选的）：

(ObjectForModel) as (stringRepresentation for the UI) for (OneObjectFromList) in (ListOfObjects) | (Filter1) | (Filter2) ...

示例：假设我们有一个学生列表：

var StudentList = [{firstName: "Jhon",lastName:"Smith" id:1},{firstName: "Clint",lastName:"Eastwood" id:2} ];

假设我们想在 typeAhead 输入中使用这个列表，但是： 1. 我们希望弹出下拉菜单显示："first name - last name" 但是当用户 select 一个项目时，我们希望列表中的整个项目都填充到 ng-model 中。 2.我们要过滤select只显示5个元素 3. 我们希望弹出下拉列表仅显示与用户输入相关的内容。

它是这样的：

uib-typeahead="student as (student.firstName +' - ' + student.lastName) for student in studentList | filter:$viewValue | limitTo:5"

如果你们还有什么要补充的，请补充，我知道我可以使用它...

Answer 2

您还可以更改模板（例如以特定方式显示字段，然后在单击时将输入设置为另一个）

在 html 文件中：

    <script type="text/ng-template" id="deterFormACTemplate.html">
        <a ng-bind-html="match.model.displayed | unsafe"></a>
    </script>


     <input typeahead-template-url="deterFormACTemplate.html" 
               uib-typeahead="item as item.field for item in autocomplete(...)"
               typeahead-on-select="mymodel=$model.field;"
               typeahead-wait-ms="500" />

在控制器中

     $scope.autocomplete = function ( ){
            return  [ {'field':'..', "displayed":"..."},{'field':'..', "displayed":"..."}, .. ];
     }

AngularJS ng-options/Typeahead 表达式语法

AngularJS ng-options/Typeahead expression syntax

angularjs

angular-ui-bootstrap

typeahead.js