0
私は自分のページに編集可能なUIグリッドを使用しています。私は、ユーザーが自分の欲しいアイテムを見つけるために検索できるようにする必要がありUIグリッド - 検索/フィルタ付きドロップダウンエディタ
： 列の一つは、画像怒鳴るなど、多くのオプションを持つドロップダウンリストです。
グリッドのうち、私は
A
答えて
0
怒鳴る画像として、ブートストラップ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);
関連する問題
- 1. 日付フィルタ付きのIMAP検索コマンド
- 2. 入力フィルタ付きDivのライブ検索
- 3. CRM 2011 - フィルタ付きサブグリッド検索機能
- 4. キー値タブ付きの検索フィルタ
- 5. Solr検索は日付フィルタ
- 6. 検索付きツリーグリッド
- 7. 日付でフィルタを検索mvc 3
- 8. グリッド検索エラー
- 9. 角度Uiグリッド条件付きCellTemplate
- 10. 角度UIグリッドの条件付きセルテンプレート
- 11. フィルタ付き検索バーとJSONデータfrom Ionic 2
- 12. VBAのWebスクレイピングトリガーで検索用語付きのフィルタ
- 13. 範囲と存在フィルタ付きの弾性検索
- 14. フリーJqGrid - 検索フィルタの幅
- 15. グリッド検索（HackerRank） - Python
- 16. Extjs 6 - グリッド検索
- 17. パイプラインのグリッド検索
- 18. クロスバリデーションとグリッド検索
- 19. フィルタが適用されたときのUIグリッドのトリガ関数
- 20. Django：FileField.nameで検索（フィルタ）
- 21. kenticoスマート検索フィルタ
- 22. Oracleフォーム検索フィルタ
- 23. ベストAjax検索/フィルタ
- 24. Androidスタジオ：ログカット検索対フィルタ
- 25. Angular 2 Kendoグリッドでドロップダウンエディタを作成するには
- 26. WPF DevExpressグリッドの日付フィルタ文字列
- 27. セマンティックUI - 検索選択非検索
- 28. Scipy：マルチスレッドのブルート（グリッド検索）？
- 29. k-meansのグリッド検索
- 30. AG-グリッド列の検索が