Multi Type Ahead

by ryanbrill

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.js"></script>
<div ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div class="user-typeahead" typeahead-select="user as user.fullName for user in getUsers($viewValue)">
               
    </div>
    <button href="#" ng-click="save()">Save</button>
</div>

CSS

.user-typeahead {
    width: 350px;
    border: 1px solid #000;
}
.user-typeahead span {
    display: inline-block;
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px;
    margin-right: 5px;
    white-space: nowrap;
}
.user-typeahead input {
    width: 150px;
    border: 0;
}

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $filter) {
    $scope.users = [
        {'id':1,'fullName':'Ryan Brill'},
        {'id':2,'fullName':'Malerie Brill'},
        {'id':3,'fullName':'Adam Brill'},
        {'id':4,'fullName':'Brianna Brill'}
    ];
    $scope.getUsers = function(input) {
        return $filter('filter')($scope.users, input)
    };
    $scope.save = function() {
        console.log($scope.selectedUsers);
    };
});

app.directive('userTypeahead', function($compile, $filter) {
    return {
        restrict: 'C',
        require: '?typeahead',
        /*template: '<span ng-repeat="user in selectedUsers">' +
            '{{user.fullName}} <a href="#" ng-click="removeUser($index)">X</a>' + 
        '</span>' + 
        '<input type="text" placeholder="Type to search users..." ng-model="selection" typeahead="user as user.fullName for user in getUsers($viewValue)" typeahead-on-select="onSelected($item)" />',*/
        template: function(tElem, tAttr) {
            return '<span ng-repeat="user in selectedUsers">' +
                '{{user.fullName}} <a href="#" ng-click="removeUser($index)">X</a>' + 
            '</span>' + 
            '<input type="text" placeholder="Type to search users..." ng-model="selection" typeahead="' + tAttr.typeaheadSelect + '" typeahead-on-select="onSelected($item)" />'
        },
        compile: function(tElement, tAttrs) {
            return {
                /*pre: function(scope, elem, attrs) {
                    var tpl = '<input type="text" placeholder="Type to search users..." ng-model="selection" typeahead="user as user.fullName for user in users" />';
                    var template = angular.element($compile(tpl)(scope));
                    elem.append(template);
                },*/
                post: function(scope, elem, attrs) {
                    var $typeahead = elem.find('input[typeahead]');
                
                   ...