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
Post a Comment