Angular ui-bootstrap typeahead select multiple

Question

Is it possible to show all the stuffs related to a person when searching for a person. and also have to select multiple persones .

here is my example code.....

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <input type="text" ng-model="selectedStuff" typeahead="stuff as stuff.desc for stuff in stuffs | filter:{name: $viewValue, desc: $viewValue}"/>
    <span>{{selectedStuff.name}}</span>
    <span>{{selectedStuff.desc}}</span>
</div>
  </body>
</html>

and js code.....

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {

  $scope.stuffs= [
                {
                 "name":"thing1",
                 "desc":"this is the first thing",
                 "title": "this is the first title"
                },
                {
                 "name":"thing2",
                 "desc":"this is the second thing",
                 "title": "this is the second title"
                }
               ]
}

here when i was searching it was showing only the name or desc or title , but i need to show whole three properties instead of one property.

and i need to need to select multiple like tags..

please help to solve this problem.

Thanks in advance

Pankaj Parkar · Accepted Answer · 2015-04-22 06:40:33Z

2

I think you need to change your html to

<input type="text" ng-model="selectedStuff" 
typeahead="stuff as stuff.name + ' ' +stuff.desc + ' ' + stuff.title for stuff in stuffs | filter:{name: $viewValue, desc: $viewValue}"/>

answered Apr 22, 2015 at 6:40

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-bootstrap typeahead select multiple

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related