AngularJS BootstrapUI带有对象和选择功能的前端

发布时间：2020-12-17 08:37:34 所属栏目：安全来源：网络整理

导读：我试图在Angular中使用 http://angular-ui.github.io/bootstrap/实现一个前面，其中typeahead字段显示完整的地址，但一旦点击另一个字段填充与该地址的邮政编码。我试图使用ng-change或ng-click这个，但没有任何成功.. http://jsfiddle.net/UxTBB/2/ angular

我试图在Angular中使用 http://angular-ui.github.io/bootstrap/实现一个前面，其中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指令非常，非常灵活，有很多方法实现所需的功能。我在这里提出了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" />

这里的关键是作为一部分是在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单击没有太多用处，因为它对点击输入字段而不是匹配弹出窗口作出反应。除此之外，它不会对使用keayboard做的选择做出反应。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!