CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ui-typeahead
Ashbury
Ashbury

Reputation: 2356

extending angular-ui-bootstrap typeahead module

I'm using angular-ui-boostrap's typeahead component to let people choose a person's name, or add a new name if their selection isn't present.

typeahead with three two names and an 'add new' option

Right now I modified getMatchesAsync with my own code:

      if(scope.matches.length < 4 || scope.matches.length == undefined){
        scope.matches.push({
          id: getMatchId(matches.length),
          label: 'Add New +',
          model: 'new'
        });
      }

But I realize this is not a good long term solution, especially when the component is updated.

Where should I put my code and how do I integrate it into the component? Typeahead module: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

Upvotes: 3

Views: 399

Answers (1)

Phil
Phil

Reputation: 164895

Here's an example of what I suggested in the comments...

someModule.filter('filterWithNew', function($filter) {
    return function(array, expression, comparator) {
        var matches = $filter('filter')(array, expression, comparator);

        if (matches.length < 4) {
            matches.push({
                label: 'Add new +',
                model: 'new'
            });
        }
        return matches;
    };
});

Then you should be able to use 

... typeahead="name.label for name in names | filterWithNew:$viewValue"

Upvotes: 4

Related Questions