Typeahead get multiple value beside the list name

Issue I found its hard to imagine a way to obtain a set of value for the typeahead directive. for example, in this plunker,http://plnkr.co/edit/Sj0kOGipJ4gNv3VCnKzJ?p=preview index.html <!doctype html> <html ng-app=”plunker”> <head> <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js”></script> <script src=”//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js”></script> <script src=”example.js”></script> <link href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” rel=”stylesheet”> </head>

Continue reading

How to do ajax postback with typeahead directive of Angular-ui-bootstrap

Issue I am using Angular-UI TypeAhead in my mvc application. Here is my HTML source: <div data-ng-app=”v”> <div ng-controller=”TypeAheadController”> <input type=”text” id=”txtType” ng-model=”selected” typeahead-on-select=”callBack($item,$model,$label)” typeahead=”state as state.Name for state in states | filter:$viewValue | limitTo:8″ class=”form-control”> </div> </div> Here is

Continue reading

How can i bind model in angular directive

Issue I am using angular type ahead from here http://pineconellc.github.io/angular-foundation/#/typeahead I have made a directive where template is <div> <input type=”text” ng-model=”user.selected” placeholder=”Type to select . . .” typeahead=”item as item.name for item in getData($viewValue)” typeahead-loading=”loadingData” class=”form-control”> <i ng-show=”loadingData” class=”glyphicon

Continue reading

Typeahead Array of Objects?

Issue I am having some issues understanding AngularUI Bootstrap’s Typeahead directive. In their example of the statesWithFlags array of objects, they do not necessarily explain what the directive expression is saying. state as state.name for state in statesWithFlags | filter:{name:$viewValue}

Continue reading

AngularJS UI-Bootstrap Typeahead

Issue I am using AngularJS and AngularUI Bootstrap’s Typeahead. I want to use the filter with multiple parameters. Here is my input control: <input id=”tbUsers” class=”form-control” ng-model=”unit.userSel” typeahead=”user as user._FName + ‘(‘ + user._LName +’)’ for user in allUsers |

Continue reading

Uncaught Error: No module: angularTypeahead

Issue Angular typeahead throws me Uncaught Error: No module: angularTypeahead. I am using angular typeahead at my project. I have added script to my index.html, like this: <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js”></script> <script src=”http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js”></script> <script src=”js/angular/app.js”></script> index.html: <div class=”row center” ng-app=”angularTypeahead”> <div style=”margin-top:0px;”

Continue reading

Uncaught Error: No module: angularTypeahead

Issue Angular typeahead throws me Uncaught Error: No module: angularTypeahead. I am using angular typeahead at my project. I have added script to my index.html, like this: <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js”></script> <script src=”http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js”></script> <script src=”js/angular/app.js”></script> index.html: <div class=”row center” ng-app=”angularTypeahead”> <div style=”margin-top:0px;”

Continue reading

how to show 2 properties in typeahead angular?

Issue I am using the angular bootstrap typeahead: <input type=”text” ng-model=”selected” selectState(state.id) typeahead-on-select=’onSelect($item, $model, $label)’ typeahead=”state.name for state in states | filter:$viewValue | limitTo:8″ class=”form-control”> At the moment I am displaying the state.name property. Is there a quick way of

Continue reading

Angular typeahead, set custom popup template

Issue is there anyway to set custom template for typeahead-popup? the “typeahead-template-url” directive is only for every match in popup. here is my code: <input class=”select-location” id=”Location” type=”text” ng-model=”model.location” ng-keypress=”keypress($event)” typeahead=”match for match in getLocations($viewValue)” typeahead-template-url=”matchUrl”/> Solution You can use

Continue reading

Angular bootstrap typeahead with asynchronous load is one character behind

Issue I have implemented the following typeahead code in a directive. Here is the HTML: <div> <input type=”text” ng-model=”company” uib-typeahead=”company as company.name for company in companyByName($viewValue)” typeahead-loading=”loadingCompanies” typeahead-no-results=”noCompanyResults” class=”form-control”> <i ng-show=”loadingCompanies” class=”glyphicon glyphicon-refresh”></i> <div ng-show=”noCompanyResults”> <i class=”glyphicon glyphicon-remove”></i> No Results

Continue reading

Angular-UI Bootstrap's typeahead ng-model doens't work as expected when placed inside tabs

Issue I’m using angular-ui typeahead plugin as following: <input type=”text” ng-model=”selected” uib-typeahead=”state for state in states | filter:$viewValue | limitTo:8″ class=”form-control”> when I place it inside tabs the following watch expressing stopping to work: $scope.$watch(‘selected’, function(){ console.log($scope.selected); }); Plunkr with

Continue reading

AngularJS typeahead giving [filter:notarray] error on Ajax GET query

Issue I have an AngularJS 1.4.7 typeahead: <input type=”text” class=”form-control simpleinput” placeholder=”keyword” name=”searchbarFormInput” id=”searchbarFormInput” ng-model=”selected” ng-click=”selected=null” ng-enter=”doBlur($event)” uib-typeahead=”record.display_name for record in getRecords($viewValue) | filter:{ display_name : $viewValue }” typeahead-template-url=”searchbar-result-template.html” typeahead-on-select=”selectRecord($item)” typeahead-focus-on-select=”false” typeahead-editable=”false” autocomplete=”off” /> This typeahead’s controller calls getRecords(needle) and

Continue reading

How to est initial value to the text box with typeahead attribute?

Issue I use typeahead in my angularjs project. I hava this value to be displayed in textbox with typeahead attribute: $scope.cities = [{id:1,address:’Berlin’}, {id:2,address:’Bonn’}, {id:3,address:’London’}, {id:4,address:’Miami’}]; And here is input text box with typeahead attribute: <input type=”text” ng-model=”city” typeahead-input-formatter=”inputFormatter($model)” placeholder=”Custom

Continue reading

Angular Js Type Ahead call function on selection

Issue // https://angular-ui.github.io/ // setup app and pass ui.bootstrap as dep var myApp = angular.module(“angularTypeahead”, [“ui.bootstrap”]); // define factory for data source myApp.factory(“States”, function() { var states = [“Alabama”, “Alaska”, “Arizona”, “Arkansas”, “California”, “Colorado”, “Connecticut”, “Delaware”, “Florida”, “Georgia”, “Hawaii”, “Idaho”,

Continue reading

typhead not populating angular ui

Issue Angular 1.5.8 Bootstrap 3.3.7 (CSS) Angular-ui 2.0.2 Using angular Typeahead (ui.bootstrap.typeahead) requires a list of objects which it will display in the ui component with HTML Problem Returning promise from service to component (1.5 style controller, view, bindings) Controller

Continue reading

Angular UI bootstrap typeahead ng-model says null when clear the filed

Issue The filter works very well, but unfortunately the {{filterlist.name}} says null once removed the typed text and also tables looks empty because of null Demo: https://plnkr.co/edit/1QVdctw1hr4ggJOtFHUZ?p=preview <input type=”text” class=”form-control” placeholder=”Name” ng-model=”filterlist.name” typeahead-editable=”false” uib-typeahead=”person.name as person.name for person in expenses

Continue reading

No search on Enter key

Issue I just built a small search app for movies using AngularJS and Elasticsearch. I used the AngularJS UI Bootstrap Typeahead for autocomplete and in testing noticed something about user interaction. Say I want to search for actors named Tom.

Continue reading

UIB Typehead dont show the dropdown

Issue I have a typehead of UI-Bootstrap but when the data is received the dropdown dont show. $scope.obtainUsers = function (valor) { console.log(valor) $http({ method: “POST”, url: “http://localhost:3000/obtainUsers”, params: {“valor”: valor} }).then(function successCallback(response){ console.log(response.data); return response.data; }, function errorCallback(error){ alert(“ERROR”)

Continue reading

Searching in two fields using Bootstrap Typeahead in AngularJS

Issue I have two fields in my JSON: first_name and last_name. I want to use Bootstrap typeahead.js, using Angular-UI. <script type=”text/ng-template” id=”customTemplate.html”> <a> <span bind-html-unsafe=”match.label | typeaheadHighlight:query”></span> </a> </script> <input type=”text” ng-model=”result” typeahead=”patient as patient.first_name for patient in ngGridUsersData.patients |

Continue reading

Unexpected Behavior in typeahead – is this a bug?

Issue I have an input using typeahead as follows: <input type=”text” id=”unit” name=”unit” class=”form-control form-input” ng-model=”item.unit” autocomplete=”off” typeahead-min-length=”0″ uib-typeahead=”unit as unit.symbol for unit in units | typeaheadFilter:{‘symbol’:$viewValue} | orderBy:smartOrder” typeahead-template-url=”unit-template.html” /> And here is the template: <script type=”text/ng-template” id=”unit-template.html”> <a

Continue reading

AngularJS / Typeahead – Delay call to $scope method

Issue I have following input field code snippet from here I am calling AngularJS $scope method in the following way <input class=”search-txt-input” id=”partner_name” name=”partner_name” title=”Partner Name” type=”text” autocomplete=”off” ng-model=”selectedPartner” typeahead=”partner as partner.name for partner in retrievePartnerList($viewValue)” typeahead-items=”2″ typeahead-min-length=”3″> So when

Continue reading

AngularJS | handle routing before they load

Issue I wish to create a simple authentication check for my routes by external service. I define the access requirements on the route object: $routeProvider .when(‘/’, { templateUrl: ‘src/app/views/index.html’, controller: ‘indexCtrl’, authenticated: true }) .when(‘/login’, { templateUrl: ‘src/app/views/login.html’, controller: ‘loginCtrl’,

Continue reading

angular: ng-class in ng-repeater , duplicate call

Issue first of all sorry for my English. my problem is: i’ve this simple code: <li ng:repeat=”item in menu.items” ng:class=”getMenuItemClass(item)”> <a ng:href=”#{{item.url}}”>{{item.label}}</a> </li> and this my getMenuItemClass: scope.getMenuItemClass = function(item) { console.log(item) var hashPath = $location.hashPath || ‘/’; if (hashPath

Continue reading

ng-class messing with the order of classes

Issue I have some very simple Angular code which looks like this… <div ng-repeat=”message in data.messages” ng-class=”‘conversationCard-‘ + message.type”></div> It works, but the resulting output looks like this…. <div ng-repeat=”message in data.messages” ng-class=”‘conversationCard-‘ + message.type” class=”ng-scope conversationCard-phone”></div> The problem is

Continue reading