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个农贸市场。

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

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

非常感谢任何帮助！

Answer 1

您可以在javascript中使用过滤器。只需将$filter注入控制器，然后执行：

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

等

Answer 2

您可以使用$ index来获取ng-repeat计数编号

$index = $index+1

或只是

您的{{index+1}}声明/ div。

中的

ng-repeat

更多： http://docs.angularjs.org/api/ng/directive/ngRepeat

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

2 个答案: