AngularJS BootstrapUI Typeahead with object & selection functionality -


i'm trying implement typeahead in angular using http://angular-ui.github.io/bootstrap/, typeahead field displays full addresses once clicked field populated postcode address. i'm trying use ng-change or ng-click this, without 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 state in states | filter:$viewvalue" />             </div>         </form>     </div> </div>

any ideas?

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

firstly, typeahead directive uses syntax similar angularjs select directive. gives full control on displayed label , data bound model value. display address label , bind postcode selpcode directly:

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

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

also, please note i'm using typeahead-editable="false" attribute bind model when selection made. working jsfiddle here: http://jsfiddle.net/jlupa/

another solution, if need use callback function use typeahead-on-select attribute: 

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

it allows specify callback when match selected. working fiddle here: http://jsfiddle.net/t8bv2/

as last note: ng-change won't work here since react on change in input while want capture selection only. ng-click not of use either reacts on clicking on input field , not matches popup. on top of wouldn't react on selections made using keayboard.


Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more