I have a an array that holds 100 objects. And with `ng-repeat` I create
table fill it with data. And I also have a filter function that is
filtering my table. Initially (on-load) filter values are set so that every
row from 100 will pass, but later user can change filter values and with
two-way binding, my table updates automatically. But here is the big
problem that I do not know how to solve. I have added counter to my filter
function and instead of running 100 times on-load it ran 1200 times on-load
and 800 times each time user change filter values. Here is the demo of my
array (only 10 object and not real data):
$scope.carList = [{"name":"car", "review":"250", "rating": "4.5",
"fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchbak"},{"name":"car", "review":"250",
"rating": "4.5", "fiveStarPercent": "70%", "recommended": "90%",
"carLink":"http://someurl.com";, "price": "$1000-$2000", "minPrice": "1000",
"maxPrice":"2000", "type": "hatchback"}];
Here is my controller and my filter function:
carApp.controller("TableBodyCtrl", ["$scope", "$http", function($scope,
$http){
$scope.selectAll = {"selected":true};
$scope.filterValues = {revNum:30,minNum:0,maxNum:0,currentCarType:null};
$scope.modelRow = { activeRow: '' };
$scope.carTypeObj = [];
$scope.showDetails = false;
$scope.carTypeArray = [];
$scope.activeTypeBox = false;
$scope.tableFilter = function(line) {
smartCounter++
console.log(smartCounter);
var revNum = (($scope.filterValues.revNum===null) ? 0 :
$scope.filterValues.revNum);
var minNum = (($scope.filterValues.minNum===null) ? 0 :
$scope.filterValues.minNum);
var maxNum = (($scope.filterValues.maxNum===null) ? 0 :
$scope.filterValues.maxNum);
var typeBool = false;
for(var i=0;i<$scope.carTypeObj.length;i++){
if ($scope.carTypeObj[i]["selected"] &&
$scope.carTypeObj[i]["type"]===line["type"]){
if ($scope.selectAll["selected"] === true){
$scope.selectAll["selected"] = false;
}
typeBool = true;
}
}
if ($scope.selectAll["selected"] === true){
typeBool = true;
}
var r = line["review"] >= revNum;
var minP = line["maxPrice"] >= minNum && line["maxPrice"]!="";
if(maxNum!=0){
var maxP = line["minPrice"] <= maxNum && line["minPrice"]!="";
}else{
var maxP = true;
}
$scope.progressBar += 1
return(r && maxP && minP && typeBool && ((line["type"] ==
$scope.filterValues.currentCarType) || ($scope.filterValues.currentCarType
== null)));
}
}]);
And here is my html:
<table>
<thead>
<tr>
<th>Car Model</th>
<th>Reviews</th>
<th>Rating</th>
<th>5 Star Percentage</th>
<th>Recommended</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="car in carList | filter:tableFilter">
<td>{{car.name}}</td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
</tbody>
</table>
How can I fix this issue:
*Angular version: v1.2.25*
UPDATE:
I am using `ng-repeat-start` because each car object has another object
that holds car reviews by year of car registration and I want to show this
table when user click on the row:
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && showDetails
&& car.allReviews.length!=0" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed
table-hover">
<thead>
<tr>
<th>Year</th>
<th>Reviews</th>
<th>Rating <span class="fiveStar">/5</span></th>
<th>Recommended</th>
<th>Reliability Rating <span class="fiveStar">/5</span></th>
<th>Performance Rating <span class="fiveStar">/5</span></th>
<th>Running Costs Rating <span class="fiveStar">/5</span></th>
</tr>
</thead>
<tbody ng-repeat="rev in car.allReviews">
....
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
