具有对象和选择功能的 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/ 的预输入指令非常非常灵活，并且有很多方法可以实现所需的功能。我在这里介绍其中的 2 个。

首先，typeahead 指令使用与 AngularJS select 非常相似的语法。指示。这使您可以完全控制显示的标签和绑定(bind)为模型值的数据。所以你可以做的是简单地将地址显示为标签并将邮政编码绑定(bind)到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"仅在进行选择时绑定(bind)模型的属性。在这里工作的 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" />

它允许您在选择匹配项时指定回调。这里有一个工作 fiddle :
http://jsfiddle.net/t8BV2/

最后一点: ng-change在这里不起作用，因为它会在您只想捕获选择时对输入中的任何更改使用react。 ng-click也没有多大用处，因为它会在单击输入字段而不是匹配弹出窗口时使用react。最重要的是，它不会对使用键盘做出的选择使用react。