AngularJS BootstrapUI Typeahead с функциональностью объекта и выбора

Я пытаюсь реализовать typeahead в 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>

какие идеи?

29
angular-ui-bootstrap angularjs typeahead

6 ответов

директива typeahead от http://angular-ui.github.io/bootstrap/ очень, очень гибко и много путей достигать пожеланной функциональности. Я представляю 2 из них здесь.

во-первых, директива typeahead использует синтаксис, очень похожий на AngularJS выберите: 

<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.

95

Я нашел способ решить эту проблему, настроив typeahead следующим образом:

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

это возвращает объект состояния в свойство model, которое можно инициализировать, задав значение соответствующему объекту:

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

рабочая скрипку вот:https://jsfiddle.net/0y3ntj4x/3/

Я думаю, что этот сценарий отсутствует в документации angular-bootstrap для typeahead.

3

просто хотел добавить к ответу, предоставленному @pkozlowski.opensource-поведение, отображаемое в jsfiddle.net/jLupa больше не работает с версией 0.10.0 UI-Bootstrap Angular. Смотрите здесь: jsfiddle.net/jLupa/87/ . Единственное изменение, которое я сделал, это обновление до версии 0.10.0, и вы можете видеть, что оба поля ввода разрешаются почтовым кодом.

2

у меня аналогичная проблема,

<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); }); });

Я надеюсь помочь кому-нибудь

2

Это еще один список значений AngularJS директива, которая использует typeahead twitter:https://github.com/mihaigiurgeanu/lov-typeahead. Вы можете использовать его с bootstrap, но и без bootstrap.

Если вы используете bower, вы можете установить его, делая:

bower install lov-typeahead --save
0
try the following before saving / validating

modelCtrl.$ setValidity ('редактируемый', true);

0