расширение модуля angular-ui-bootstrap typeahead

Я использую компонент typeahead angular-ui-boostrap, чтобы позволить людям выбирать имя человека или добавлять новое имя, если их выбор отсутствует.

введите заголовок с тремя двумя именами и опцией

Прямо сейчас я изменил getMatchesAsync своим собственным кодом:

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

Но я понимаю, что это не очень хорошее долгосрочное решение, особенно когда компонент обновляется.

Куда я должен поместить свой код и как мне интегрировать его в компонент? Модуль Typeahead: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js


javascript angularjs angular-ui-bootstrap angular-ui-typeahead
person Ashbury    schedule 11.06.2015    source источник
comment
Разве вы не можете просто манипулировать исходными данными по мере их поступления?   -  person Phil    schedule 11.06.2015
comment
Это хорошая мысль, но есть несколько причин, по которым это не сработает: 1. Фильтрация и сопоставление выполняются на стороне клиента. 2. На самом деле я не получаю результаты, список уже загружен.   -  person Ashbury    schedule 11.06.2015
comment
Я подумал, что, возможно, это было так. Вы по-прежнему можете использовать метод в выражении sourceArray, который возвращает отфильтрованный набор с необязательной новой моделью (или обещанием, если вам нужно обрабатывать асинхронно). Единственная разница в том, что вы выполняете фильтрацию/сопоставление вместо ввода текста   -  person Phil    schedule 11.06.2015
comment
Если подумать, typeahead все равно не фильтрует. Я бы просто создал пользовательский фильтр, который проксирует фильтр   -  person Phil    schedule 11.06.2015
comment
@ Фил, я просто собирался предложить добавить туда фильтр ... я сделал то же самое с ... typeahead='item in items | addNew' или каким-то подобным кодом   -  person tarrball    schedule 11.06.2015

Ответы (1)


arrow_upward
4
arrow_downward

Вот пример того, что я предложил в комментариях...

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;
    };
});

Тогда вы сможете использовать

... typeahead="name.label for name in names | filterWithNew:$viewValue"
person Phil    schedule 11.06.2015
comment
Отлично, это сработало. Мне также пришлось добавить в хэш «full_name» со значением «Add New +», так как я указал человека как person.full_name в разметке. - person Ashbury; 11.06.2015
comment
@Эшбери круто. Я позволил себе угадать ваш формат данных, но я подумал, что вы знаете, что там делать. - person Phil; 11.06.2015