AngularJS--分组筛选显示groupBy(angular-filter)

Angular 2016-06-30 欢迎您加入IT交流群:123493055IT交流群

首先,用到这个呢,是我想用来分组(按时间分组展示数据),又不想自己写filter,搜集了一下整理如下

安装

bower install angular-filter --save

添加依赖

angular.module('myApp', ['angular.filter']);

demo

数据

$scope.data =[{
  lesson_id: "12345",
  image_name: "1.jpg",
  lesson_name: "111",
  create_time: 1467404938000,
  image_path: "1.jpg"
},{
  lesson_id: "12345",
  image_name: "1.jpg",
  lesson_name: "222",
  create_time: 1466190779000,
  image_path: "1.jpg"
},{
  lesson_id: "12345",
  image_name: "1.jpg",
  lesson_name: "333",
  create_time: 1466190779000,
  image_path: "1.jpg"
}];

页面

<ion-view view-title="资讯" class="news-list">
  <ion-content>
    <div class="news-card" 
	  ng-repeat="(key, value) in data | groupBy: 'create_time'">
		<!-- 按create_time分组展示 -->
    <div class="row date-row">
    <div class="col col-10">{key| date : 'dd'}</div>
      <div class="col col-80"><span>{ key| date : 'yyyy年MM月' }</span>
        <span>{ key| date : 'EEE' |week}</span></div>
      </div>
	  <div class="row news-row" >
	    <div class="col col-50" ng-repeat="n in value" ng-click="toNewsDetail(n.id)">
	      <img  set-course-img ng-src="{n.image_path |courseImg}">
		  <div class="course-title-overflow">{n.lesson_name}</div>
		</div>
	  </div>
	</div>
  </ion-content>
</ion-view>
<!-- 代码在这双花括号会被解析隐藏,所以用了“{}”,自己补上吧,哈哈 -->

效果

我的实现

注:凡原创文章转载请注明出处(有好的建议和意见可以联系我(*^__^*))