UI grid-dropdownEditor с поиском / фильтром

Я использую редактируемую UI-сетку на своей странице.
Один из столбцов является выпадающим списком со многими параметрами, как изображение ниже:

Введите описание изображения здесь

Я должен позволить пользователю искать, чтобы найти элемент, который они хотят.

Из сетки, я использую bootstrap selectpicker, как образ ниже

Введите описание изображения здесь

1 ответ

  1. Пожалуйста, попробуйте выбранный плагин, который больше подходит для ваших потребностей :

    индекс.формат html

    <!DOCTYPE html>
    <html ng-app="myApp">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link data-require="chosen@*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
        <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    
        <script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
        <script src="chosen.js"></script> 
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <h1>{{name}}</h1>
          <select chosen multiple id="states" style="width:500px">
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
          </select>
      </body>
    
    </html>
    

    Ваше приложение.js

    var app = angular.module('myApp', ['localytics.directives']);
    
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'Angular Chosen with <option>';
    });
    

    выбранный.js

    // Generated by CoffeeScript 1.8.0
    (function() {
      var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
      angular.module('localytics.directives', []);
    
      angular.module('localytics.directives').directive('chosen', [
        '$timeout', function($timeout) {
          var CHOSEN_OPTION_WHITELIST, NG_OPTIONS_REGEXP, isEmpty, snakeCase;
          NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([$\w][$\w]*)|(?:\(\s*([$\w][$\w]*)\s*,\s*([$\w][$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/;
          CHOSEN_OPTION_WHITELIST = ['noResultsText', 'allowSingleDeselect', 'disableSearchThreshold', 'disableSearch', 'enableSplitWordSearch', 'inheritSelectClasses', 'maxSelectedOptions', 'placeholderTextMultiple', 'placeholderTextSingle', 'searchContains', 'singleBackstrokeDelete', 'displayDisabledOptions', 'displaySelectedOptions', 'width'];
          snakeCase = function(input) {
            return input.replace(/[A-Z]/g, function(
    	

    Please try the chosen plugin which is more suitable to your needs :

    index.html

    <!DOCTYPE html>
    <html ng-app="myApp">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link data-require="chosen@*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
        <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    
        <script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
        <script src="chosen.js"></script> 
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <h1>{{name}}</h1>
          <select chosen multiple id="states" style="width:500px">
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
          </select>
      </body>
    
    </html>
    

    Your app.js

    var app = angular.module('myApp', ['localytics.directives']);
    
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'Angular Chosen with <option>';
    });
    

    chosen.js

    // Generated by CoffeeScript 1.8.0
    (function() {
      var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
      angular.module('localytics.directives', []);
    
      angular.module('localytics.directives').directive('chosen', [
        '$timeout', function($timeout) {
          var CHOSEN_OPTION_WHITELIST, NG_OPTIONS_REGEXP, isEmpty, snakeCase;
          NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/;
          CHOSEN_OPTION_WHITELIST = ['noResultsText', 'allowSingleDeselect', 'disableSearchThreshold', 'disableSearch', 'enableSplitWordSearch', 'inheritSelectClasses', 'maxSelectedOptions', 'placeholderTextMultiple', 'placeholderTextSingle', 'searchContains', 'singleBackstrokeDelete', 'displayDisabledOptions', 'displaySelectedOptions', 'width'];
          snakeCase = function(input) {
            return input.replace(/[A-Z]/g, function($1) {
              return "_" + ($1.toLowerCase());
            });
          };
          isEmpty = function(value) {
            var key;
            if (angular.isArray(value)) {
              return value.length === 0;
            } else if (angular.isObject(value)) {
              for (key in value) {
                if (value.hasOwnProperty(key)) {
                  return false;
                }
              }
            }
            return true;
          };
          return {
            restrict: 'A',
            require: '?ngModel',
            priority: 1,
            link: function(scope, element, attr, ngModel) {
              var chosen, defaultText, disableWithMessage, empty, initOrUpdate, match, options, origRender, removeEmptyMessage, startLoading, stopLoading, valuesExpr, viewWatch;
              element.addClass('localytics-chosen');
              options = scope.$eval(attr.chosen) || {};
              angular.forEach(attr, function(value, key) {
                if (__indexOf.call(CHOSEN_OPTION_WHITELIST, key) >= 0) {
                  return options[snakeCase(key)] = scope.$eval(value);
                }
              });
              startLoading = function() {
                return element.addClass('loading').attr('disabled', true).trigger('chosen:updated');
              };
              stopLoading = function() {
                return element.removeClass('loading').attr('disabled', false).trigger('chosen:updated');
              };
              chosen = null;
              defaultText = null;
              empty = false;
              initOrUpdate = function() {
                if (chosen) {
                  return element.trigger('chosen:updated');
                } else {
                  chosen = element.chosen(options).data('chosen');
                  return defaultText = chosen.default_text;
                }
              };
              removeEmptyMessage = function() {
                empty = false;
                return element.attr('data-placeholder', defaultText);
              };
              disableWithMessage = function() {
                empty = true;
                return element.attr('data-placeholder', chosen.results_none_found).attr('disabled', true).trigger('chosen:updated');
              };
              if (ngModel) {
                origRender = ngModel.$render;
                ngModel.$render = function() {
                  origRender();
                  return initOrUpdate();
                };
                if (attr.multiple) {
                  viewWatch = function() {
                    return ngModel.$viewValue;
                  };
                  scope.$watch(viewWatch, ngModel.$render, true);
                }
              } else {
                initOrUpdate();
              }
              attr.$observe('disabled', function() {
                return element.trigger('chosen:updated');
              });
              if (attr.ngOptions && ngModel) {
                match = attr.ngOptions.match(NG_OPTIONS_REGEXP);
                valuesExpr = match[7];
                scope.$watchCollection(valuesExpr, function(newVal, oldVal) {
                  var timer;
                  return timer = $timeout(function() {
                    if (angular.isUndefined(newVal)) {
                      return startLoading();
                    } else {
                      if (empty) {
                        removeEmptyMessage();
                      }
                      stopLoading();
                      if (isEmpty(newVal)) {
                        return disableWithMessage();
                      }
                    }
                  });
                });
                return scope.$on('$destroy', function(event) {
                  if (typeof timer !== "undefined" && timer !== null) {
                    return $timeout.cancel(timer);
                  }
                });
              }
            }
          };
        }
      ]);
    
    }).call(this);
    

    ) {
    return "_" + (

    Please try the chosen plugin which is more suitable to your needs :

    index.html

    <!DOCTYPE html>
    <html ng-app="myApp">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link data-require="chosen@*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
        <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
        <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    
        <script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
        <script src="chosen.js"></script> 
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <h1>{{name}}</h1>
          <select chosen multiple id="states" style="width:500px">
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
          </select>
      </body>
    
    </html>
    

    Your app.js

    var app = angular.module('myApp', ['localytics.directives']);
    
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'Angular Chosen with <option>';
    });
    

    chosen.js

    // Generated by CoffeeScript 1.8.0
    (function() {
      var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
      angular.module('localytics.directives', []);
    
      angular.module('localytics.directives').directive('chosen', [
        '$timeout', function($timeout) {
          var CHOSEN_OPTION_WHITELIST, NG_OPTIONS_REGEXP, isEmpty, snakeCase;
          NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/;
          CHOSEN_OPTION_WHITELIST = ['noResultsText', 'allowSingleDeselect', 'disableSearchThreshold', 'disableSearch', 'enableSplitWordSearch', 'inheritSelectClasses', 'maxSelectedOptions', 'placeholderTextMultiple', 'placeholderTextSingle', 'searchContains', 'singleBackstrokeDelete', 'displayDisabledOptions', 'displaySelectedOptions', 'width'];
          snakeCase = function(input) {
            return input.replace(/[A-Z]/g, function($1) {
              return "_" + ($1.toLowerCase());
            });
          };
          isEmpty = function(value) {
            var key;
            if (angular.isArray(value)) {
              return value.length === 0;
            } else if (angular.isObject(value)) {
              for (key in value) {
                if (value.hasOwnProperty(key)) {
                  return false;
                }
              }
            }
            return true;
          };
          return {
            restrict: 'A',
            require: '?ngModel',
            priority: 1,
            link: function(scope, element, attr, ngModel) {
              var chosen, defaultText, disableWithMessage, empty, initOrUpdate, match, options, origRender, removeEmptyMessage, startLoading, stopLoading, valuesExpr, viewWatch;
              element.addClass('localytics-chosen');
              options = scope.$eval(attr.chosen) || {};
              angular.forEach(attr, function(value, key) {
                if (__indexOf.call(CHOSEN_OPTION_WHITELIST, key) >= 0) {
                  return options[snakeCase(key)] = scope.$eval(value);
                }
              });
              startLoading = function() {
                return element.addClass('loading').attr('disabled', true).trigger('chosen:updated');
              };
              stopLoading = function() {
                return element.removeClass('loading').attr('disabled', false).trigger('chosen:updated');
              };
              chosen = null;
              defaultText = null;
              empty = false;
              initOrUpdate = function() {
                if (chosen) {
                  return element.trigger('chosen:updated');
                } else {
                  chosen = element.chosen(options).data('chosen');
                  return defaultText = chosen.default_text;
                }
              };
              removeEmptyMessage = function() {
                empty = false;
                return element.attr('data-placeholder', defaultText);
              };
              disableWithMessage = function() {
                empty = true;
                return element.attr('data-placeholder', chosen.results_none_found).attr('disabled', true).trigger('chosen:updated');
              };
              if (ngModel) {
                origRender = ngModel.$render;
                ngModel.$render = function() {
                  origRender();
                  return initOrUpdate();
                };
                if (attr.multiple) {
                  viewWatch = function() {
                    return ngModel.$viewValue;
                  };
                  scope.$watch(viewWatch, ngModel.$render, true);
                }
              } else {
                initOrUpdate();
              }
              attr.$observe('disabled', function() {
                return element.trigger('chosen:updated');
              });
              if (attr.ngOptions && ngModel) {
                match = attr.ngOptions.match(NG_OPTIONS_REGEXP);
                valuesExpr = match[7];
                scope.$watchCollection(valuesExpr, function(newVal, oldVal) {
                  var timer;
                  return timer = $timeout(function() {
                    if (angular.isUndefined(newVal)) {
                      return startLoading();
                    } else {
                      if (empty) {
                        removeEmptyMessage();
                      }
                      stopLoading();
                      if (isEmpty(newVal)) {
                        return disableWithMessage();
                      }
                    }
                  });
                });
                return scope.$on('$destroy', function(event) {
                  if (typeof timer !== "undefined" && timer !== null) {
                    return $timeout.cancel(timer);
                  }
                });
              }
            }
          };
        }
      ]);
    
    }).call(this);
    

    .toLowerCase());
    });
    };
    isEmpty = function(value) {
    var key;
    if (angular.isArray(value)) {
    return value.length === 0;
    } else if (angular.isObject(value)) {
    for (key in value) {
    if (value.hasOwnProperty(key)) {
    return false;
    }
    }
    }
    return true;
    };
    return {
    restrict: 'A',
    require: '?ngModel',
    priority: 1,
    link: function(scope, element, attr, ngModel) {
    var chosen, defaultText, disableWithMessage, empty, initOrUpdate, match, options, origRender, removeEmptyMessage, startLoading, stopLoading, valuesExpr, viewWatch;
    element.addClass('localytics-chosen');
    options = scope.$eval(attr.chosen) || {};
    angular.forEach(attr, function(value, key) {
    if (__indexOf.call(CHOSEN_OPTION_WHITELIST, key) >= 0) {
    return options[snakeCase(key)] = scope.$eval(value);
    }
    });
    startLoading = function() {
    return element.addClass('loading').attr('disabled', true).trigger('chosen:updated');
    };
    stopLoading = function() {
    return element.removeClass('loading').attr('disabled', false).trigger('chosen:updated');
    };
    chosen = null;
    defaultText = null;
    empty = false;
    initOrUpdate = function() {
    if (chosen) {
    return element.trigger('chosen:updated');
    } else {
    chosen = element.chosen(options).data('chosen');
    return defaultText = chosen.default_text;
    }
    };
    removeEmptyMessage = function() {
    empty = false;
    return element.attr('data-placeholder', defaultText);
    };
    disableWithMessage = function() {
    empty = true;
    return element.attr('data-placeholder', chosen.results_none_found).attr('disabled', true).trigger('chosen:updated');
    };
    if (ngModel) {
    origRender = ngModel.$render;
    ngModel.$render = function() {
    origRender();
    return initOrUpdate();
    };
    if (attr.multiple) {
    viewWatch = function() {
    return ngModel.$viewValue;
    };
    scope.$watch(viewWatch, ngModel.$render, true);
    }
    } else {
    initOrUpdate();
    }
    attr.$observe('disabled', function() {
    return element.trigger('chosen:updated');
    });
    if (attr.ngOptions && ngModel) {
    match = attr.ngOptions.match(NG_OPTIONS_REGEXP);
    valuesExpr = match[7];
    scope.$watchCollection(valuesExpr, function(newVal, oldVal) {
    var timer;
    return timer = $timeout(function() {
    if (angular.isUndefined(newVal)) {
    return startLoading();
    } else {
    if (empty) {
    removeEmptyMessage();
    }
    stopLoading();
    if (isEmpty(newVal)) {
    return disableWithMessage();
    }
    }
    });
    });
    return scope.$on('$destroy', function(event) {
    if (typeof timer !== "undefined" && timer !== null) {
    return $timeout.cancel(timer);
    }
    });
    }
    }
    };
    }
    ]);

    }).call(this);