一尘不染

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

angularjs

我正在尝试使用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>

有任何想法吗?


阅读 176

收藏
2020-07-04

共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所做的选择做出反应。

2020-07-04