current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 14 down vote favorite
5

I'm trying to implement a typeahead in Angular using http://angular-ui.github.io/bootstrap/, where the typeahead field displays full addresses but once clicked another field is populated with just the postcode for that address. I'm trying to use ng-change or ng-click for this, but without any success..

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>

Any ideas?

share|improve this question

4 Answers 4

up vote 40 down vote accepted

The typeahead directive from http://angular-ui.github.io/bootstrap/ is very, very flexible and there are many ways of achieving the desired functionality. I'm presenting 2 of them here.

Firstly, the typeahead directive uses syntax very similar to the AngularJS select directive. This gives you full control over a displayed label and the data bound as model value. So what you could do is to simply display address as a label and bind postcode to the selPcode directly:

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

The key here is the as part is in the typeahead expression: typeahead="state.postcode as state.address for state in states

Also, please note that I'm using the typeahead-editable="false" attribute to bind model only when a selection is made. A working jsFiddle here: http://jsfiddle.net/jLupa/

Another solution, if you really need to use a callback function is to use the typeahead-on-select attribute: 

<input type="text"  typeahead-on-select="setPcode($item)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />

It allows you to specify a callback when a match is selected. A working fiddle here: http://jsfiddle.net/t8BV2/

As the last note: ng-change won't work here since it would react on any change in the input while you want to capture selection only. ng-click is not of much use either as it reacts on clicking on the input field and not the matches popup. On top of this it wouldn't react on selections made by using keayboard.

share|improve this answer
    
Ok, great, thanks for that! Works fine now apart from I'm using: <input type="text" placeholder="Type to filter" ng-model="siteAPop" typeahead-editable="false" typeahead="site.postcode as site.name + ', ' + site.address + ', ' + site.town for site in sites | filter:\$viewValue " > and the field shows ' , ,' to start with, rather than my placeholder. Any ideas? –  stampeder Jul 25 '13 at 14:12
    
@stampeder I think that there might be a bug in the version 0.4.0 connected to the field displaying ` , ,`. It was corrected in master already and will be part of the next release. Feel free to raise an issue in github.com/angular-ui/bootstrap/issues?state=open to confirm –  pkozlowski.opensource Jul 25 '13 at 15:12
    
In this example, how would you select a default value. When I set "setPcode" to "M1" in the controller the expected result would be for the field to be filled in with "Manchester"????? –  Meeker Oct 11 '13 at 21:12
1  
+1 for typeahead-on-select –  anvarik Feb 10 '14 at 22:48
    
+2 for $item. I didn't see that in the documentation. I'm glad I found it on the interwebs. –  Josh C. Apr 1 '14 at 16:08
up vote 1 down vote

I has a similar problem,

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

but dindt work, with the use of a service in this way

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

and was solved with

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

I hope help somebody

share|improve this answer
up vote 0 down vote

This is another list of values angularjs directive that is using twitter's typeahead: https://github.com/mihaigiurgeanu/lov-typeahead. You can use it with bootstrap, but also without bootstrap.

If you are using bower, you can install it doing:

bower install lov-typeahead --save
share|improve this answer
up vote 0 down vote

Just wanted to add on to the answer provided by @pkozlowski.opensource - the behavior displayed in jsfiddle.net/jLupa no longer works with version 0.10.0 of the Angular's UI-Bootstrap. See here: jsfiddle.net/jLupa/87/ . The only change I made was updating to version 0.10.0, and you can see that both input boxes resolve to the postal code.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.