angularjs - Angular multi selector autocomplete . -


i want use angular multi selector autocomplete below working demo select 1 item. html

<!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.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>      <script src="script.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">      <p></p>      <b>selected user</b>            enter name: <input type="text" ng-model="selected" typeahead="user (user.first + ' ' + user.last) user in users | filter:$viewvalue" />  </div>    </body>  </html>

here js

angular.module('plunker', ['ui.bootstrap']);  function typeaheadctrl($scope) {      $scope.selected = "";    $scope.users = [      {'id': 1, 'first': 'john', 'last': 'depp', 'age':52, 'gender':'male'},       {'id': 2, 'first': 'sally', 'last': 'johanson', 'age':13, 'gender':'female'},      {'id': 3, 'first': 'taylor', 'last': 'swift', 'age':22, 'gender':'female'},      {'id': 4, 'first': 'max', 'last': 'payne', 'age':72, 'gender':'male'},      {'id': 5, 'first': 'jessica', 'last': 'hutton', 'age':12, 'gender':'female'},      {'id': 6, 'first': 'nicholas', 'last': 'cage','age':3, 'gender':'male'},      {'id': 7, 'first': 'lisa', 'last': 'simpson', 'age':18, 'gender':'female'}    ];    }

can out typeahead ? want select multiple value drop down please me.

mutiselect in ui-select might job

 <ui-select multiple class="form-control" ng-model="vm.selected" name="name" >       <ui-select-match placeholder="select or search">{{$item.first}}</ui-select-match>       <ui-select-choices repeat="val.first val in vm.values | filter: $select.search">        {{val.first}}        <div ng-bind-html="val | highlight: $select"></div>       </ui-select-choices>     </ui-select> 

this link give rough idea multi select


Comments

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -