计算 ng-repeat 中的相同元素 Angular

Question

我有一个数组，它为我提供了电影列表，我想计算属于同一类别的电影数量。

我的J

var app = angular.module("MyApp", []);

app.controller("MyController", function ($scope) {

    $scope.movies = [
           { title: 'The Matrix', rating: 7.5, category: 'Action' },
           { title: 'Focus', rating: 6.9, category: 'Comedy' },
           { title: 'The Lazarus Effect', rating: 6.4, category: 'Thriller' },
           { title: 'Everly', rating: 5.0, category: 'Action' },
           { title: 'Maps to the Stars', rating: 7.5, category: 'Drama' }
    ];
});

我的Html

<div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Rating</th>
                        <th>Category</th>


                    </tr>
                </thead>

                <tr ng-repeat="data in movies | filter:query">
                    <td>{{data.title}}</td>
                    <td>{{data.rating}}</td>
                    <td>{{data.category}}</td>


                </tr>
            </table>
        </div>

现在我正在使用 ng-repeat 在视图页面上显示数据我想要的是我想显示电影类别以及属于该类别的电影数量例如让我们说：

Actions(2) // No Of Count
Everly //Movie Name
The Matrix // Movie Name

我想在我的 ng-repeat 中以上面提到的方式输出我该怎么做.. 任何帮助将不胜感激

Answer 1

尝试在您的ng-repeat

中使用过滤器

<tr ng-repeat="data in movies | filter:{category: 'Action'}">
    <td>{{data.title}}</td>
    <td>{{data.rating}}</td>
    <td>{{data.category}}</td>
</tr>

它将在显示您筛选的类别时起作用，但如果您需要对其进行计数。您需要在您的控制器中计算它，它将出现在下面的示例中

或您可以在您的控制器中执行此操作，方法是使用 for 循环遍历 $scope.movies。或者使用 underscoreJS javascript 插件。

$scope.movies.action = [];
for(var i = 0; i < $scope.movies.lenth; i++){
    if($scope.movies[i].category == 'Action'){
        $scope.moveies.action.push($scope.movies[i]);
    }
}
// $scope.movies.actions.length; number of action movie

或与Angularjavascript过滤器

$scope.movies.action = $filter('filter')($scope.movies, {category: 'Action'});
// $scope.movies.actions.length; number of action movie

或带下划线

$scope.movies.action = _.filter($scope.movies, funtion(movie){
    return movie.category == 'Action'; 
});
// $scope.movies.actions.length; number of action movie

您的 HTML 将像这样，在筛选类别中有电影计数器

<tr><td>Action: {{movies.action.lenth}}</td></tr>
<tr ng-repeat="data in movies | filter:{category: 'Action'}">
    <td>{{data.title}}</td>
    <td>{{data.rating}}</td>
    <td>{{data.category}}</td>
</tr>

编辑：一些拼写错误并使用 javascript 解决方案添加计数器

Answer 2

虽然可以使用自定义过滤器来编写，您可以使用此模块中已编写的实用程序 https://github.com/a8m/angular-filter

它提供了过滤器 groupBy 和许多其他可用于分组的实用程序

包括这个脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-   filter/0.5.4/angular-filter.js"></script>

并将模块注入到您的主应用程序中

var app = angular.module("MyApp", ['angular.filter']);

那么你的显示逻辑就和

一样简单

 <div ng-controller="MyController"> 
    <ul ng-repeat="(key, value) in movies | groupBy: 'category'">
      Group name: {{ key }} {{value.length}}
      <li ng-repeat="movie in value">
        movie: {{ movie.title }} 
      </li>
     </ul>
</div>

为了显示计数，请注意表达式 {{value.length}}

您可以在 angular-过滤器的源代码中检查优化的过滤器逻辑。

计算 ng-repeat 中的相同元素 Angular

Count Same Elements In ng-repeat Angular

grouping

angularjs

ng-repeat