Question

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

我的Js

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 in abov提及方式我该怎么办..任何帮助将不胜感激

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

使用Angular javascript过滤器

或

$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

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

它提供了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}}

您可以在角度滤波器的源代码中检查优化的滤波器逻辑。

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

2 个答案: