Question

我想知道是否有办法突显＆＃34;写作时（作为过滤器），Angular Typeahead中的最佳选择，但不删除所有其他选项：

uib-typeahead="item.prop as item.prop for item in vm.items | filter: $viewValue"

vm.items只是一个简单的静态数组，没有异步/远程搜索。

谢谢！

Answer 1

ui-select是angular-ui lib的一部分。它有你需要的东西。

Answer 2

我用这个嵌入Typeahead指令并模仿组合框/选择功能的指令回答我自己的问题：

JS：

.directive('combobox', ['$compile', '$timeout', function($compile, $timeout) {
var directive = {
    restrict: 'E',
    scope: {
        model: "=",
        item: "@",
        items: "=i",
        onSelect: "&",
        onBlur: "&"
    },
    compile: compile
};

return directive;

function compile(element, attrs) {
    return function(scope, element, attrs) {
        scope.focusing = false;
        scope.first = null;

        scope.open = function() {
            var ctrl = element.find('input').controller('ngModel');

            var temp = scope.model;

            ctrl.$setViewValue(' ');

            $timeout(function() {
                ctrl.$setViewValue('');
                scope.model = temp;
            });
        };

        scope.select = function(item, model, label) {
            scope.focusing = true;
            scope.onSelect({item: item, model: model, label: label});
        };

        scope.blur = function() {
            scope.focusing = false;
            scope.onBlur();
        };

        scope.focus = function() {
            if (scope.focusing === false) {
                scope.focusing = true;
                element.find('input')[0].focus();
                scope.first = scope.model;
                scope.open();
            }
        };

        scope.keyup = function(key) {
            if (key === 27) {
                scope.model = scope.first;
                scope.open();
            }
        };

        var template = '<div class="combo combo-static">' +
                       '    <input ng-model="model"' +
                       '           uib-typeahead="' + attrs.item + '"' +
                       '           typeahead-focus-first="false"' +
                       '           typeahead-min-length="0"' +
                       '           typeahead-editable="false"' +
                       '           typeahead-on-select="select($item, $model, $label)"' +
                       '           ng-focus="focus()"' +
                       '           ng-blur="blur()"' +
                       '           ng-keyup="keyup($event.keyCode)"' +
                       '           placeholder="' + attrs.placeholder + '"' +
                       '           type="text"' +
                       '           class="' + attrs.class + '">' +
                       '    <div class="combo-label" ng-click="focus()" ng-hide="focusing">' +
                       '        <span>{{model || "' + attrs.placeholder + '"}}</span>' +
                       '        <i class="fa fa-caret-down"></i>' +
                       '    </div>' +
                       '</div>';

        element.html(template);
        element.removeClass(attrs.class);

        $compile(element.contents())(scope);
    };
}
}]);

这是我的插件：http://plnkr.co/edit/zWN950IxOndlYQHBXdY9?p=preview

希望它可以帮助别人。

Angular UI Typeahead过滤器没有选项删除

2 个答案: