AngularJS BootstrapUI Typeahead with object &选择功能 [英] AngularJS BootstrapUI Typeahead with object & selection functionality

问题描述

我正在尝试在 Angular 中使用 http://angular-ui.github.io/bootstrap/，其中预先输入的字段显示完整地址，但一旦单击，另一个字段将填充该地址的邮政编码.我正在尝试为此使用 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 = 函数(站点){$scope.selPcode = site.postcode;};});<div class="容器"><div ng-controller="mainCtrl" class="row-fluid"><form class="row-fluid"><div class="container-fluid">邮政编码<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"/>

</表单>

有什么想法吗?

解决方案

来自 http://angular-ui 的 typeahead 指令.github.io/bootstrap/ 非常非常灵活，有很多方法可以实现所需的功能.我在这里展示了其中的 2 个.

首先，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 也没有多大用处，因为它对点击输入字段而不是匹配弹出窗口做出反应.最重要的是，它不会对使用键盘所做的选择做出反应.

I'm trying to implement a typeahead in Angular using http://angular-ui.github.io/bootstrap/, where the typeahead field displays full addresses but once clicked another field is populated with just the postcode for that address. I'm trying to use ng-change or ng-click for this, but without any success..

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>

Any ideas?

解决方案

The typeahead directive from http://angular-ui.github.io/bootstrap/ is very, very flexible and there are many ways of achieving the desired functionality. I'm presenting 2 of them here.

Firstly, the typeahead directive uses syntax very similar to the AngularJS select directive. This gives you full control over a displayed label and the data bound as model value. So what you could do is to simply display address as a label and bind postcode to the selPcode directly:

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

The key here is the as part is in the typeahead expression: typeahead="state.postcode as state.address for state in states

Also, please note that I'm using the typeahead-editable="false" attribute to bind model only when a selection is made. A working jsFiddle here: http://jsfiddle.net/jLupa/

Another solution, if you really need to use a callback function is to use the typeahead-on-select attribute:

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

It allows you to specify a callback when a match is selected. A working fiddle here: http://jsfiddle.net/t8BV2/

As the last note: ng-change won't work here since it would react on any change in the input while you want to capture selection only. ng-click is not of much use either as it reacts on clicking on the input field and not the matches popup. On top of this it wouldn't react on selections made by using keayboard.

这篇关于AngularJS BootstrapUI Typeahead with object &选择功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！