UIグリッド - 検索/フィルタ付きドロップダウンエディタ

私は自分のページに編集可能なUIグリッドを使用しています。私は、ユーザーが自分の欲しいアイテムを見つけるために検索できるようにする必要がありUIグリッド - 検索/フィルタ付きドロップダウンエディタ

：列の一つは、画像怒鳴るなど、多くのオプションを持つドロップダウンリストです。

グリッドのうち

、私は

2017-01-13 Carlos Henrique Biazin Esteves

怒鳴る画像として、ブートストラップselectpickerをuseingよ、あなたのニーズに適している選択したプラグインを試してみてください：

のindex.htmlを

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" /> 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script> 
    <script data-require="[email protected]*" 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>

あなたの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);

出典

2017-01-13 14:13:47

UIグリッド - 検索/フィルタ付きドロップダウンエディタ

答えて

関連する問題