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进行的选择做出反应.