具有对象和选择功能的AngularJS BootstrapUI Typeahead

Question

我正在尝试使用http://angular-ui.github.io/bootstrap/在Angular中实现预输入，其中typeahead字段显示完整地址，但是一旦单击，另一个字段将仅填充该地址的邮政编码。我正在尝试为此使用ng-
change或ng-click，但没有成功。

http://jsfiddle.net/UxTBB/2/

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.states = [{postcode:'B1',address:'Bull ring'},{postcode:'M1',address:'Manchester'}];
    $scope.setPcode = function(site) {
        $scope.selPcode = site.postcode;
        };
});

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                postcode <input type="text" ng-model="selPcode" />
                typeahead <input type="text"  ng-change="setPcode(site)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

有任何想法吗？

Answer 1

来自http://angular-ui.github.io/bootstrap/的typeahead指令非常非常灵活，可以通过多种方式实现所需的功能。我在这里介绍其中的两个。

首先，typeahead指令使用的语法与AngularJS
select指令非常相似。这使您可以完全控制显示的标签和作为模型值绑定的数据。因此，您可以做的就是简单地将地址显示为标签，然后将邮政编码selPcode直接绑定到：

<input type="text" ng-model="selPcode" typeahead="state.postcode as state.address for state in states | filter:$viewValue" typeahead-editable="false" />

这里的关键是该as部分在typeahead表达式中： typeahead="state.postcode as state.address for state in states

另外，请注意，我typeahead- editable="false"仅在做出选择时才使用属性绑定模型。可以正常工作的jsFiddle：http：//jsfiddle.net/jLupa/

如果您确实需要使用回调函数，则另一种解决方案是使用typeahead-on-select属性：

<input type="text"  typeahead-on-select="setPcode($item)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />

选择匹配项后，您可以指定回调。这里的工作提琴：http :
//jsfiddle.net/t8BV2/

最后一点：ng-change在这里不起作用，因为当您只想捕获选择内容时，它将对输入的任何更改做出反应。ng- click也没有太大用处，因为它会在单击输入字段而不是匹配弹出窗口时做出反应。最重要的是，它不会对使用keayboard所做的选择做出反应。