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

【问题标题】：Angular UI Typeahead filter without options remove删除没有选项的 Angular UI Typeahead 过滤器
【发布时间】：2016-03-31 10:52:42
【问题描述】：

我想知道是否有一种方法可以在编写时“突出显示”Angular Typeahead 中的最佳选择（就像过滤器一样），但不删除所有其他选项：

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

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

谢谢！

【问题讨论】：

标签： angularjs angularjs-filter angular-ui-typeahead

【解决方案1】：

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

【讨论】：

【解决方案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

希望它可以帮助某人。

【讨论】：