Question

当我用喜剧搜索时，它也会在我们想要的时候给出结果仅过滤标题而不是类别。数数和结果都是错误的。任何机构都可以建议我如何使用group by或以其他方式开发自定义过滤器。

我的代码是

<script>
var myApp = angular.module('myApp', ['angular.filter']);

myApp.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' }
    ];
});     

</script>
<div ng-controller="MyController"> 
    <div class="searchBar">
        <input type="text" name="title" ng-model="title" placeholder="Search..." />
    </div>
    <ul class="angularList" ng-repeat="(key, value) in movies  | groupBy: 'category'">
        <h3>{{ key }} ({{ value.length }})</h3>
        <li ng-repeat="movie in value | filter:title">
            <a href="#">{{ movie.title }}</a><br />
            <div class="rating_box">
                <div class="rating" style="width:{{movie.rating*10}}%"></div>
            </div>
        </li>               
    </ul>
</div>

Answer 1

找到的解决方案：Solution 你是剧本：

    myApp.filter('groupBy', function ($timeout) {
    return function (data, key) {
        if (!key) return data;
        var outputPropertyName = '__groupBy__' + key;
        if(!data[outputPropertyName]){
            var result = {};  
            for (var i=0;i<data.length;i++) {
                if (!result[data[i][key]])
                    result[data[i][key]]=[];
                result[data[i][key]].push(data[i]);
            }
            Object.defineProperty(data, outputPropertyName, {enumerable:false, configurable:true, writable: false, value:result});
            $timeout(function(){delete data[outputPropertyName];},0,false);
        }
        return data[outputPropertyName];
    };
})

在您的HTML中：

<div ng-controller="MyController as myCtrl"> 
    <div class="searchBar">
        <input type="text" name="title" ng-model="title" placeholder="Search..." />
    </div>
    <ul class="angularList" ng-repeat="(key, value) in (myCtrl.movies  | groupBy: 'myCtrl.category')">
        <h3>{{ key }} ({{ value.length }})</h3>
        <li ng-repeat="movie in value | filter:title">
            <a href="#">{{ movie.title }}</a><br />
            <div class="rating_box">
                <div class="rating" style="width:{{movie.rating*10}}%"></div>
            </div>
        </li>               
    </ul>
</div>

Answer 2

我已经测试了您的代码，它对我来说很好。请检查此网址https://jsbin.com/tapeke/edit?html,js,output

Answer 3

我还测试了你的代码，它工作得很好...... 下面的代码是工作代码

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
</head>
<body>
<div ng-controller="MainController"> 

    <div class="searchBar">
        <input type="text" name="title" ng-model="title" placeholder="Search..." />
    </div>
    <ul class="angularList" ng-repeat="(key, value) in movies  | groupBy: 'category'">
        <h3>{{ key}} ({{ value.length}})</h3>
        <li ng-repeat="movie in value| filter:title">
            <a href="#">{{ movie.title}}</a><br />
            <div class="rating_box">
                <div class="rating" style="width:{{movie.rating * 10}}%"></div>
            </div>
        </li>               
    </ul>

</div>
<script>
    angular.module('myApp', ['angular.filter'])

            .controller('MainController', 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'}
                        ];
            });


</script>

过滤器在角度js中与group by无法正常工作

3 个答案: