javascript - 如何获取 ng-repeat 上对象属性的项目计数

Question

我的应用程序正在使用 Bootstrap 3 和 AngularJS。我正在尝试根据 ng-repeat 的过滤结果计算每个州的农贸市场数量。

我的 JSON 数据看起来像这样

$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"
}
]

这就是我使用自定义过滤器设置 ng-repeat 的方式:

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

我使用的复选框会过滤掉并仅显示具有所选食品的农贸市场。

<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>

我的自定义过滤器是这样的:

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;
}
  });

以下是我想要实现的目标的一些示例:

默认情况下，如果未选中烘焙食品、奶酪和鸡蛋，我会看到纽约有 2 个农贸市场，佛罗里达有 1 个农贸市场。

如果我检查鸡蛋，我会看到纽约有 0 个农贸市场，佛罗里达州有 0 个农贸市场。

如果我检查 Cheese，我会看到纽约有 2 个农贸市场，佛罗里达州有 1 个农贸市场。

如果我检查烘焙食品和奶酪，我会看到纽约有 1 个农贸市场，佛罗里达州有 0 个农贸市场。

任何帮助将不胜感激!

Answer 1

您可以在 JavaScript 中使用过滤器。只需将 $filter 注入(inject) Controller ，然后执行:

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

这将为您提供过滤后的数组，您可以循环遍历它:

$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]++;
}

然后:

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

等等