Angularjs 过滤器不能与js中的group by一起正常工作_Angularjs

Angularjs 过滤器不能与js中的group by一起正常工作

angularjs

Angularjs 过滤器不能与js中的group by一起正常工作,angularjs,Angularjs,当我与喜剧搜索，然后它也给结果，而我们想要的仅使用标题筛选，不使用类别筛选。所以计数和结果都是错误的。有谁能建议我如何使用group by开发自定义过滤器，或者有其他方法吗我的代码是 <script> var myApp = angular.module('myApp', ['angular.filter']); myApp.controller("MyController", function ($scope) { $scope.movies = [

当我与喜剧搜索，然后它也给结果，而我们想要的仅使用标题筛选，不使用类别筛选。所以计数和结果都是错误的。有谁能建议我如何使用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>

解决方案位于：你的剧本：

    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>

我已经测试了你的代码，它对我来说运行良好。请检查此URL

我还测试了您的代码，它工作正常。。。下面的代码是工作代码

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

使用类似的方法对仅标题应用筛选器ng repeat=key，电影中的值|筛选器：{title:title}我不理解这个问题。请举例说明，您正在做什么，您期望示例所需输出会发生什么，以及示例实际输出会发生什么？如果您添加了angular filter.js J-D，它将忽略所有类别，而类别将显示为count 0JB Nizet，请查看用户何时输入要搜索的字符串：列表已过滤，仅显示标题包含搜索字符串的电影。类别仍然可见，但计算更改以说明为该类别显示的电影数量。电影是根据“category”属性在类别中分组的。是的，它可以正常工作，但是这里我们只想用标题过滤，而不是分级和类别