目前,我的应用程序包含两个过滤器功能:一个显示与指定过滤器匹配的列表项,另一个跟踪当前显示的列表项的数量。我会使用普通过滤器,但我的应用需要能够删除过滤视图中的单个列表项。普通过滤器不提供此功能。这是我的第一个过滤器的更多信息:http ://www.bennadel.com/blog/2487-Filter-vs-ngHide-With-ngRepeat-In-AngularJS.htm?&_=0.17772154766134918#comments_42833
这是我的两个功能:
JS:
myAppModule.controller('TweetCtrl',function($scope, $rootScope, $filter){
$scope.isExcludedByFilter = applySearchFilter(); //displays all tweets when data is retrieved
$rootScope.filteredData = $scope.tweets.length; //sets the number of displayed tweets to the number of total tweets
$scope.$watch(
"filters.search",
function( newText, oldText ) {
if ( newText === oldText ) {
return;
}
$rootScope.filteredData = $filter('mainFilter')($scope.tweets, $scope.filters.search, $scope.filters.polarity); //sets the number of filtered tweets being shown based on a search query
applySearchFilter(); //displays a list of tweets that match the search query
}
);
$scope.$watch(
"filters.polarity",
function( newCat, oldCat ) {
//console.log(newCat);
if ( newCat === oldCat ) {
return;
}
$rootScope.filteredData = $filter('mainFilter')($scope.tweets, $scope.filters.search, $scope.filters.polarity); //sets the number of filtered tweets being shown based on an object property
applySearchFilter(); //displays a list of tweets that match the object property
}
);
// ---
// PRIVATE METHODS.
// ---
function applySearchFilter() {
var polarityFilter = $scope.filters.polarity.toLocaleLowerCase();
var polarity = $scope.tweet.polarity.toLowerCase();
//console.log("filter: " + polFilter + "/pol: " + polarity);
var searchFilter = $scope.filters.search.toLowerCase();
var text = $scope.tweet.text.toLowerCase();
//console.log(text);
//console.log("textFilter: " + textFilter + "/text: " + text);
if( searchFilter =="" && polarityFilter == ""){
$scope.isExcludedByFilter = false;
//console.log($scope.isExcludedByFilter + "none");
} else if(searchFilter == "" && polarityFilter !== ""){
var isCategory = (polarityFilter == polarity);
$scope.isExcludedByFilter = ! isCategory;
} else if(searchFilter !=="" && polarityFilter == ""){
var isSubstring = ( text.indexOf( searchFilter ) !== -1 );
$scope.isExcludedByFilter = ! isSubstring;
} else if(searchFilter !=="" && polarityFilter !==""){
var isCategory = (polarityFilter == polarity);
var isSubstring = ( text.indexOf( searchFilter ) !== -1 );
$scope.isExcludedByFilter = ! isSubstring || ! isCategory;
}
}
});
myAppModule.filter('mainFilter', function($scope){
return function (tweets, textFilter, polFilter) {
var counter = 0;
var length = tweets.length;
for (var i = 0; i < length; i++) {
var tweetText = tweets[i]['text'].toLowerCase();
var polarity = tweets[i]['polarity'].toLowerCase();
var isSubstring = (tweetText.indexOf(textFilter.toLowerCase()) !== -1);
var isCategory = (polarity == polFilter.toLowerCase());
if(textFilter == "" && polFilter == ""){
counter++;
} else if(textFilter !== "" && polFilter == ""){
if (isSubstring) {
counter++;
}
} else if(textFilter =="" && polFilter !== ""){
if (isCategory){
counter++;
}
} else if(textFilter !=="" && polFilter !==""){
if (isSubstring && isCategory ){
counter++;
}
}
}
return counter.toString();
}
});
虽然这种方法运行良好,没有任何明显的滞后,但调用两个类似的函数似乎效率很低。我想将“applySearchFilter()”函数的功能与我的自定义过滤器结合起来。这将允许我显示正确的列表项并通过调用一个函数来计数。我尝试了以下方法:
myAppModule.filter('mainFilter', function($scope){
return function (tweets, textFilter, polFilter) {
var counter = 0;
var length = tweets.length;
for (var i = 0; i < length; i++) {
var tweetText = tweets[i]['text'].toLowerCase();
var polarity = tweets[i]['polarity'].toLowerCase();
var isSubstring = (tweetText.indexOf(textFilter.toLowerCase()) !== -1);
var isCategory = (polarity == polFilter.toLowerCase());
if(textFilter == "" && polFilter == ""){
counter++;
$scope.isExcludedByFilter = false;
} else if(textFilter !== "" && polFilter == ""){
if (isSubstring) {
counter++;
$scope.isExcludedByFilter = ! isSubstring;
}
} else if(textFilter =="" && polFilter !== ""){
if (isCategory){
counter++;
$scope.isExcludedByFilter = ! isCategory;
}
} else if(textFilter !=="" && polFilter !==""){
if (isSubstring && isCategory ){
counter++;
$scope.isExcludedByFilter = ! isSubstring || ! isCategory ;
}
}
}
return counter.toString();
}
});
但收到此错误:
Error: Unknown provider: $scopeProvider <- $scope <- mainFilterFilter
除了这个错误:
Error: Circular dependency: which refers to the first line in my "TweetCtrl" controller.
我的问题是,如何正确地将 $scope 注入到我的自定义过滤器中?有没有更好的方法来执行这两项任务?我感谢您的帮助。