Angular groupBy过滤抛出错误

时间:2016-08-30 11:13:21

标签: javascript angularjs

我想使用创建日期对邮件进行分组。但是,如果我应用过滤器,我收到错误未知提供者:groupByFilterProvider< - groupByFilter

我希望我的结果按时间分组,例如,

下午1:24

您好 你好

等。

但是,我在没有使用groupBy过滤器的情况下得到了这个。 嗨1:24 PM 你好,下午1:24就好了。

我为此创造了一个小提琴,请仔细研究并建议我解决这个问题。 https://jsfiddle.net/Lt7aP/4/

我用过

groupBy: 'created'

1 个答案:

答案 0 :(得分:0)

groupBy不是开箱即用的AngularJS,你需要https://github.com/a8m/angular-filter#groupby

这里是代码,但是您必须截断数组的created成员,因为groupBy会将它们视为不同的值。我在控制器的末尾已经这样做了



var myApp = angular.module('myApp', ['angular.filter','a8m.group-by']);

myApp.controller('LoginController', function($scope, $filter) {
  $scope.map = {
    "Today": [{
      "msg": "jhyhj",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472541041844,
      "from": "Dev"
    }, {
      "msg": "jghjg",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472541043213,
      "from": "Dev"
    }, {
      "msg": "hii",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472543443842,
      "from": "Dev"
    }, {
      "msg": "hii",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472543481505,
      "from": "Dev"
    }, {
      "msg": "hello",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472548350369,
      "from": "Dev"
    }, {
      "msg": "hello",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472548351702,
      "from": "Dev"
    }, {
      "msg": "hello",
      "userId": "800",
      "profileImagePath": "",
      "created": 1472548353023,
      "from": "Dev"
    }]
  };
  angular.forEach($scope.map["Today"],function(val,idx){
    val.created = $filter('date')(val.created, 'shortTime')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.js"></script>

<div ng-app="myApp" ng-controller="LoginController">
  <div ng-repeat="(key, value) in map">
    <p>
      {{key}}
    </p>
    <div ng-repeat="(created,msgs) in value | groupBy : 'created'">
      <b>{{created | date : 'shortTime'}}</b>
      <p ng-repeat="msg in msgs">{{msg.msg}} </p>
    </div>
  </div>
&#13;
&#13;
&#13;