How to get the item count for an object attribute on ng-repeat

Question

My application is using Bootstrap 3 and AngularJS. I am trying to count the number of farmers markets for each state based on the filtered results on ng-repeat.

My JSON data looks something like this

$scope.fmData = [
{
    "MarketName": "Farm1",
    "Bakedgoods" :"N",
    "Cheese":"Y",
    "Eggs":"N",
    "latitude": 42.374858,
    "longitude": -72.519422,
    "state:": "New York"
},
{
    "MarketName": "Farm2",
    "Bakedgoods" :"N",
    "Cheese":"Y",
    "Eggs":"N"
    "latitude": 42.5728,
    "longitude": -72.1421,
    "state:": "Florida"
},
{
    "MarketName": "Farm3",
    "Bakedgoods" :"Y",
    "Cheese":"Y",
    "Eggs":"N"
    "latitude": 42.318,
    "longitude": -71.7757,
    "state:": "New York"
}
]

This is how I set up my ng-repeat with the custom filter:

<div ng-repeat="farmer in fmData | myFilter:SearchFood">

I am using checkboxes that would filter out and only display the farmers markets that have the selected food products.

<div class="checkbox">
    <label>
        <input type="checkbox" ng-model="SearchFood.Bakedgoods" />
    </label>
</div>
<div class="checkbox">
     <label>
        <input type="checkbox" ng-model="SearchFood.Cheese" />
     </label>
</div>
<div class="checkbox">
     <label>
        <input type="checkbox" ng-model="SearchFood.Eggs" />
     </label>
</div>

My custom filter is like this:

app.filter('myFilter', function() {
 return function(markets, range) {
  var out = [];  
  angular.forEach(markets, function(Mitem, Mindex){
    var flag = true;
    angular.forEach(range, function(Ritem, Rindex){
      if(!Ritem) return;
      MitemBoolVal = (Mitem[Rindex] == "Y");
      flag = ((MitemBoolVal == Ritem && flag)); 
    });

    if(flag){
      out.push(Mitem);
    }
  });

  return out;
}
  });

Here are some examples of what I am trying to achieve:

By default, if Baked Goods, Cheese, and Eggs are unchecked, I would see that New York has 2 farmer markets and Florida has 1 farmer market.

If I checked Eggs, I would see that New York has 0 farmers markets and Florida has 0 farmers markets.

If I checked Cheese, I would see that New York has 2 farmers markets and Florida has 1 farmer market.

If I checked Baked Goods and Cheese, I would see that New York has 1 farmer market and Florida has 0 farmer market.

Any help would be greatly appreciated!

Answer 1

You can use your filter in javascript. Just inject $filter into your controller and then execute:

var filtered = $filter('myFilter')($scope.fmData, $scope.SearchFood);

This will give you the filtered array, and you can just loop through it:

$scope.statesCount = {};
filtered.forEach(function(item){
    // if item.state is not in our object yet, create it with value of 1
    if(typeof $scope.statesCount[item.state] === "undefined")
         $scope.statesCount[item.state] = 1;
    // if it is, increment its count
    else
         $scope.statesCount[item.state]++;
}

Then:

$scope.statesCount['New York'] // equals number of farmers markets in New York
$scope.statesCount['Florida'] // equals number of farmers markets in Florida

etc.

Answer 2

You can $index to get your ng-repeat count no.

$index = $index+1

or simply

{{index+1}} in your ng-repeat statement/div.

For more: http://docs.angularjs.org/api/ng/directive/ngRepeat