31

我正在尝试使用http://angular-ui.github.io/bootstrap/在 Angular 中实现 typeahead ，其中 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>

有任何想法吗？

4

6 回答 6

104

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

首先，typeahead 指令使用与 AngularJS选择指令非常相似的语法。这使您可以完全控制显示的标签和绑定为模型值的数据。所以你可以做的是简单地将地址显示为标签并将邮政编码selPcode直接绑定到：

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

这里的关键是表达式 as中的部分：typeaheadtypeahead="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也没有多大用处，因为它会在单击输入字段而不是匹配弹出窗口时做出反应。最重要的是，它不会对使用键盘做出的选择做出反应。

于 2013-07-25T11:36:30.687 回答
4

@pkozlowski-opensource 的出色解决方案有一个缺点：您不能以这种方式从 ng-model 属性初始化 typeahead，至少如果您希望它显示项目的描述而不是其代码。

我找到了一种通过像这样配置预先输入来解决这个问题的方法：

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

这会将状态对象返回给模型属性，可以通过将值设置为适当的对象来对其进行初始化：

    $scope.selected = {postcode:'M1',address:'Manchester'};

在这里工作小提琴：https ://jsfiddle.net/0y3ntj4x/3/

我认为预输入的 angular-bootstrap 文档中缺少这种情况。

于 2016-01-27T10:04:08.387 回答
3

我有类似的问题，

<input type="text" ng-model="select" typeahead="a as a.Value for a in countries | filter:{{ Value:$viewValue }} "class="form-control" typeahead-editable="false" >

{ Code: AL,ParentCode: null,Value: Albania,Id: 1206,Name: countries }

但是 dindt 工作，以这种方式使用服务

$scope.countries = []; _services.getcountries(function(result) { $scope.countries = result; });

并解决了

$scope.countries = []; _services.getcountries(function(result) { $.each(result, function(i, o) { $scope.countries.push(o); }); });

我希望能帮助别人

于 2014-05-23T07:09:17.410 回答
2

只是想补充@pkozlowski.opensource 提供的答案 - jsfiddle.net/jLupa 中显示的行为不再适用于 Angular 的 UI-Bootstrap 0.10.0 版。见这里：jsfiddle.net/jLupa/87/。我所做的唯一更改是更新到版本 0.10.0，您可以看到两个输入框都解析为邮政编码。

于 2014-03-16T13:51:14.863 回答
0

这是另一个使用 twitter 的 typeahead 的值 angularjs 指令列表：https ://github.com/mihaigiurgeanu/lov-typeahead 。您可以将它与引导程序一起使用，也可以不使用引导程序。

如果您使用的是凉亭，您可以安装它：

bower install lov-typeahead --save
于 2013-11-22T00:13:00.647 回答
0 
try the following before saving / validating

modelCtrl.$setValidity('editable', true);

于 2015-06-21T14:36:56.083 回答