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>

Любые идеи?

Ответы

Ответ 1

Директива typeahead от http://angular-ui.github.io/bootstrap/ очень гибкая и существует множество способов достижения желаемой функциональности. Я представляю здесь 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" />

Ключевым здесь является as часть в выражении 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-click не очень полезен, поскольку он реагирует на нажатие на поле ввода, а не на всплывающее окно совпадений. Вдобавок к этому он не будет реагировать на выбор, сделанный с помощью кейборда.

Ответ 2

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

Ответ 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); }); });

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

Ответ 4

@pkozlowski-opensource отличное решение имеет один недостаток: вы не можете инициализировать typeahead из свойства 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 для typeahead.

Ответ 5

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

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

bower install lov-typeahead --save

Ответ 6

try the following before saving / validating

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