我想通過在不同類別使用多個複選框來過濾JSON數據,到目前爲止IAM成功地過濾數據,但我需要的是過濾的類別也請通過下面去小提琴理解這種 jsfiddle link 基本上當我選擇在pantsize類的東西,那麼襯衫尺寸和鞋的尺寸過濾器也過濾根據組合,這裏的問題是過濾複選框在頂部到底部的方向正在發生,例如,如果我選擇襯衫尺寸類別則只有鞋子大小複選框被過濾的東西,但不能使用以下服務動態過濾使用多個複選框
喘氣大小 蔭
1
A
回答
0
我做你的服務和用戶界面的一些變化
過濾器上運行時過濾的UI本身數據的基礎複選框通過使用ng-hide
檢查<div ng-hide="(filteredPlayers | filter:pants).length==0">
線添加
<div ng-controller="MyCtrl">
<div>
<div class="top">
Search: <input name="company" type="text" class="search-input" ng-model="query"/>
</div>
<section class="left" style="border-right:1px">
<div class="filter">
Pant Size
<div>
<div ng-repeat="pants in pantsGroup">
<div ng-hide="(filteredPlayers | filter:pants).length==0">
<b><input type="checkbox" ng-model="usePants[pants]"/>{{pants}}</b>
<span>({{(filteredPlayers | filter:pants).length}})</span>
</div>
</div>
</div>
</div>
<div class="filter">
Shirt Size
<div>
<div ng-repeat="shirts in shirtsGroup">
<div ng-hide="(filteredPlayers | filter:shirts).length==0">
<b><input type="checkbox" ng-model="useShirts[shirts]"/>{{shirts}}</b>
<span>({{(filteredPlayers | filter:shirts).length}})</span>
</div>
</div>
</div>
</div>
<div class="filter">
Shoe Size
<div>
<div ng-repeat="shoes in shoesGroup">
<div ng-hide="(filteredPlayers | filter:shoes).length==0">
<b><input type="checkbox" ng-model="useShoes[shoes]"/>{{shoes}}</b>
<span>({{(filteredPlayers | filter:shoes).length}})</span>
</div>
</div>
</div>
</div>
</section>
<section class="right" style="border-right:1px">
<div>
<ul>
<li ng-repeat="player in filteredPlayers | filter:query" >
<p><b>Player: {{player.name}}</b></p>
<p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p>
</li>
</ul>
</div>
</section>
</div>
而且在服務中使用相同數據集,以獲得不同的組
var myApp = angular.module('myApp',[]);
var uniqueItems = function (data, key) {
//alert("test");
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
function MyCtrl($scope, filterFilter) {
$scope.usePants = {};
$scope.useShirts = {};
$scope.useShoes = {};
$scope.players = [
{name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Rodman', shirt: 'XSXL', pants: '42', shoes: '11'},
{name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Will Will', shirt: 'XXLL', pants: '42', shoes: '12'},
{name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
{name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},
{name: 'One More', shirt: 'M', pants: '32', shoes: '9'},
{name: 'Player One', shirt: 'XXL', pants: '42', shoes: '11'},
{name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '12'},
{name: 'Player Two', shirt: 'XXXXL', pants: '42', shoes: '12'}
];
// Watch the pants that are selected
$scope.$watch(function() {
return {
players: $scope.players,
usePants: $scope.usePants,
useShirts: $scope.useShirts,
useShoes: $scope.useShoes
}
}, function (value) {
var selected;
$scope.pantsGroup = uniqueItems($scope.players, 'pants');
var filterAfterPants = [];
selected = false;
for (var j in $scope.players) {
var p = $scope.players[j];
for (var i in $scope.usePants) {
if ($scope.usePants[i]) {
selected = true;
if (i == p.pants) {
filterAfterPants.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterPants = $scope.players;
}
$scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
var filterAfterShirts = [];
selected = false;
for (var j in filterAfterPants) {
var p = filterAfterPants[j];
for (var i in $scope.useShirts) {
if ($scope.useShirts[i]) {
selected = true;
if (i == p.shirt) {
filterAfterShirts.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterShirts = filterAfterPants;
}
$scope.shoesGroup = uniqueItems($scope.players, 'shoes');
var filterAfterShoes = [];
selected = false;
for (var j in filterAfterShirts) {
var p = filterAfterShirts[j];
for (var i in $scope.useShoes) {
if ($scope.useShoes[i]) {
selected = true;
if (i == p.shoes) {
filterAfterShoes.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterShoes = filterAfterShirts;
}
$scope.filteredPlayers = filterAfterShoes;
}, true);
$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
}
檢查更新fiddle
希望它能幫助你。
相關問題
- 1. 使用filterrific過濾多個複選框
- 2. 使用javascript過濾多個複選框
- 3. Angularjs複選框多個過濾器
- 4. AngularJS - 過濾多個複選框組
- 5. jQuery多個複選框過濾器組
- 6. 如何用angularJS中的多個複選框創建一個動態過濾器
- 7. 角度動態多重複選框過濾器JS
- 8. 使用複選框和list.js應用多個過濾器
- 9. 使用Javascript動態選擇多個複選框選擇
- 10. 使用輸入複選框的多個數據屬性過濾
- 11. 如何使用複選框實現多個過濾器?
- 12. 如何過濾使用多個複選框的datagridview
- 13. 如何使用複選框過濾多個列表項目?
- 14. 使用多個組合複選框的Jquery過濾
- 15. 得到複選框值動態使用動態複選框名
- 16. Angular - 用複選框過濾
- 17. 使用動態動作的多個複選框
- 18. 多個動態生成的複選框
- 19. 動態創建多個複選框
- 20. 使用複選框來過濾記錄
- 21. 使用jQuery過濾複選框
- 22. 使用複選框過濾ListBox.ItemsSource
- 23. 使用jquery +複選框過濾
- 24. 的Javascript過濾器使用複選框
- 25. 使用複選框來過濾數據
- 26. 使用複選框過濾列表
- 27. 使用複選框過濾集合
- 28. jquery多複選框過濾器
- 29. jQuery DataTables:多重複選框過濾
- 30. 過濾結果與多值複選框
你錯過,包括小提琴網址是什麼? –
@Lini蘇珊我編輯我的問題請 – mounika