Make Select 框有一個表單輸入，可以使用 AngularJS 和 Bootstrap 過濾和搜索我的選項

Question

我正在嘗試將當前的選擇框（當前有很多選項）轉換為可搜索的選擇框，其中有一個輸入，以便於搜索和過濾。

選擇框是一個指令，它在應用程序的很多地方都有使用。

我的角度版本：“角度”：“1.3.20”

我的引導程序版本：“angular-bootstrap”：“~0.12.1”

這是我的代碼：

.directive('mySelector', function() {
    return {
        template: '<select
                       class="form-control"
                       ng-change="$parent.reloadOtherSelector(inputIdItem, afterList)"
                       ng-model="inputIdItem"
                       ng-options=\'e.id as (e.number + " - " + e.name) for e in $parent.getItems {{angularfilter}}\'
                       ng-required={{objectRequired}}
                       ng-disabled="allowModify == false">
                           <option value="">{{ $parent.labelItem }}</option>
                   </select>',

        restrict: 'E',

        scope : { inputIdItem: '=', inputIdOther: '=', afterList: '=', objectRequired: '=', allowModify: '=', listFilter: '='},

        controller: function($scope){

            $scope.$watch("inputIdItem", function(newValue, oldValue) {
                if (!angular.isUndefined($scope.inputIdOther) && !angular.isUndefined(newValue) && !angular.isUndefined(oldValue))
                    $scope.inputIdOther = null;
            });

            $scope.angularfilter = $scope.listFilter ? (" | filter: " + JSON.stringify($scope.listFilter) + "") : "";
        }
    };
})

Answer 1

我的建議是在您的輸入中添加自動完成功能。

這是一個例子 - https://embed.plnkr.co/plunk/CU1K3O

如果您不喜歡使用材料設計，則有一個指令可以讓您從 html 端添加和過濾結果。 https://material.angularjs.org/latest/demo/autocomplete