AngularJS BootstrapUI键盘缓冲与对象和放大器;选择功能 [英] AngularJS BootstrapUI Typeahead with object & selection functionality

问题描述

我想实现用一个角 http://angular-ui.github.io/bootstrap/ ，其中预输入字段显示完整的地址，但一旦点击另一个字段填入刚才的帖子code该地址。为了这个，我想要使用NG-改变或NG-点击，但没有成功。

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>

任何想法？

推荐答案

的预输入指令：//角UI。 github.io/bootstrap/ 是非常灵活的，有实现所需功能的许多方面。我是$ P $这里psenting其中2

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.

首先，预输入指令使用语法非常类似于AngularJS 选择的指令。这使您可以在一个标签显示完全控制和约束作为模型值的数据。所以你可以做的是简单地显示地址的标签和绑定后code到 SELP code 直接

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" />

这里的关键是为部分在预输入前pression：
预输入=state.post code作为国家state.address国有

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

另外，请注意，我使用了预输入编辑=假属性绑定仅在做出选择的模式。这里的一个工作的jsfiddle： http://jsfiddle.net/jLupa/

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" />

它允许在选择匹配您指定一个回调。一个工作小提琴在这里：
http://jsfiddle.net/t8BV2/

随着最后一个音符： NG-变化不会在这里工作，因为它会在输入任何变化，同时要只捕获选择反应。 NG-点击是没多大用处无论是作为它的点击输入框，而不是比赛弹出反应。在此之上，将不使用keayboard做出的选择作出反应。

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键盘缓冲与对象和放大器;选择功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！