我正在尝试使用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>
有任何想法吗?
来自http://angular-ui.github.io/bootstrap/的typeahead指令非常非常灵活,可以通过多种方式实现所需的功能。我在这里介绍其中的两个。
首先,typeahead指令使用的语法与AngularJS select指令非常相似。这使您可以完全控制显示的标签和作为模型值绑定的数据。因此,您可以做的就是简单地将地址显示为标签,然后将邮政编码selPcode直接绑定到:
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
as
typeahead
typeahead="state.postcode as state.address for state in states
另外,请注意,我typeahead- editable="false"仅在做出选择时才使用属性绑定模型。可以正常工作的jsFiddle:http://jsfiddle.net/jLupa/
typeahead- editable="false"
如果您确实需要使用回调函数,则另一种解决方案是使用typeahead-on-select属性:
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所做的选择做出反应。
ng-change
ng- click