AngularJS,多面搜索是非常缓慢的
问题描述:
我使用这个多面搜索https://plnkr.co/edit/wNbRidDCLmwIBWUOz5bz到我的项目,但与430项目,筛选计数器是非常缓慢...我有输入滞后,当我使用搜索框。AngularJS,多面搜索是非常缓慢的
在HTML:
({{ (filteredItems | filter:query | filter:count(group.name, facet)).length }})
在控制器:
$scope.count = function (prop, value) {
return function (el) {
return el[prop] == value;
};
};
你有别的选择吗?
答
我把你的小提琴放在这里:http://jsfiddle.net/ema7wpse/并解决了我上面提到的问题。我没有看到它的任何性能问题,但你原来的小提琴对我来说表现不错,所以你的里程可能会有所不同。
(function() {
angular.module('myApp', []);
var uniqueItems = function(data, key) {
var result = [];
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
angular.module('myApp').controller("MyCtrl",MyCtrl)
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'
} {
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'
}];
// 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.count = function(prop, value) {
return function(el) {
return el[prop] == value;
};
};
$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);
}
angular.module('myApp').filter('count', function() {
return function(collection, key) {
var out = "test";
for (var i = 0; i < collection.length; i++) {
//console.log(collection[i].pants);
//var out = myApp.filter('filter')(collection[i].pants, "42", true);
}
return out;
}
});
angular.module('myApp').filter('groupBy',
function() {
return function(collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
})();
一个快速的解决办法,以避免输入滞后,并通过添加'NG-模型选项=“{反跳:200}”避免过多的无用的计算是在搜索输入防抖动模式招标' – Naigel
没有变化。问题是计数功能。 – Akawan
你能更新小提琴以包括所有的物品吗?响应基本上是你发布内容的瞬间。 –