1
テーブルデータにフィルタを作成したいと思います。非標準のチェックボックス動作時の角度とJSフィルタ
フィルタは一般的なもの(1対多数のフィルタグループ)で、検索フィールドと混在している必要があります。私は、データ、基本的なロジックと検索作業がありますが、フィルタリングされたレコードを返す関数を構築する正しい方法を見つけることができません。すべてのフィルタにはALL
のオプションがあり、onLoad
の間にチェックされますが、残りのチェックボックスはオフになっています(顧客仕様)。フィルタオプションの1つにチェックを入れてもチェックされません。
HTMLとJSコード:
$scope.checkedAll = [true, true];
\t
$scope.data.items = [
\t \t {name: "Provider", value: 'provider_id', content: [
\t \t \t {name: 'Azure VM', value: 'azure_vm', selected: false},
\t \t \t {name: 'CloudForms', value: 'cloudforms', selected: false}
\t \t \t // more providers of them...
\t \t ]},
\t \t {name: "State", value: 'state_id', content: [
\t \t \t {name: 'Terminated', value: 'terminated', selected: false},
\t \t \t {name: 'On', value: 'on', selected: false},
\t \t \t {name: 'Off', value: 'off', selected: false}
\t \t \t //more states
\t \t ]}
\t \t //more filters []
\t ];
$scope.data.list = [
{provider_id: "provider1", display_name: "name1", state_id: "on"},
{provider_id: "provider2", display_name: "name2", state_id: "on"},
{provider_id: "provider2", display_name: "name3", state_id: "off"},
{provider_id: "provider2", display_name: "name4", state_id: "terminated"}
//much more records
];
\t $scope.optionClickedAll = function(index) {
\t \t var checked = $scope.checkedAll[index];
\t \t if (!checked) {
\t \t \t return;
\t \t }
\t \t
\t \t angular.forEach($scope.data.items[index].content, function (element) {
\t \t \t element.selected = !checked;
\t \t });
\t }
\t
\t $scope.optionClicked = function(index, element) {
\t \t var checked = element.selected;
\t \t
\t \t if (checked) {
\t \t \t $scope.checkedAll[index] = false;
\t \t }
\t \t
\t }
\t
\t $scope.filterSelected = function(list) {
\t \t var result = [];
\t \t
/* \t \t var filterIds = [];
\t \t var itemIds = [];
\t \t for (var i = 0; i < $scope.data.items.length; ++i) {
\t \t \t var item = $scope.data.items[i];
\t \t \t for (var j = 0; j < item.content.length; ++j) {
\t \t \t \t var value = item.content[j];
\t \t \t \t if ($scope.checkedAll[i] || value.selected) {
\t \t \t \t \t if (filterIds.indexOf(item.value) == -1) filterIds.push(item.value);
\t \t \t \t \t if (itemIds.indexOf(value.value) == -1) itemIds.push(value.value);
\t \t \t \t }
\t \t \t }
\t \t }
*/
\t \t for (var k = 0; k < list.length; ++k) {
\t \t \t // ...
\t \t return result;
\t }
}
<div class="col-md-2 ">
<div class="filters">
<div class="search-box">
<label class="filter-label">FILTERS</label>
<div class="input-field">
<input type="text" ng-model="searchInstances">
<label class="">${Search}</label>
</div>
</div>
<div ng-repeat="item in data.items">
<label>{{item.name|uppercase}}</label>
<div class="checkbox-group">
<input type="checkbox" ng-click="optionClickedAll($index)" ng-model="checkedAll[$index]" id="{{item.value}}">
<label for="{{item.value}}">All</label>
<div ng-init="parentIndex = $index">
<div ng-repeat="element in item.content">
<input class="filled-in filter-all" type="checkbox" ng-click="optionClicked(parentIndex, element)" ng-model="element.selected" id="{{element.value}}">
<label for="{{element.value}}">{{element.name}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10 ">
<table class="table">
<thead>
<tr>
<th>Provider</th>
<th>State</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filterSelected(data.list) | filter:searchInstances">
<td>{{item.provider_id}}</td>
<td>{{item.state_id}}</td>
<td>{{item.display_namy}}</td>
</tr>
</table>
</div>
それは$scope.data.items
の構造を変更することが可能です。提案を感謝してください。
このコードはServiceNowプラットフォーム上で動作し、Angularにはいくつかの制限があるため、私はカスタムフィルタを使用できないことに言及します。 – Tomas