2

Monaca
ONSEN UI 1.3.0
AngularJS 1.3

タイトルの通りですが、APIなどから取得したデータを日付ごとにまとめたいと思っています。
API側でデータを整形してもよいのですが、出来ればフロント側(アプリ側)で対応出来るようにしたいと考えています。

以下の様な簡単なサンプルの場合、前のデータを参照して同じかどうかをチェックするのはどうすればよいでしょうか?
たしかAngularJSにはfilterのようなものがあった気がしましたが絞込ではなく使えるのでしょうか?

var app=angular.module("app",[]);
app.controller('mainController',['$scope', function ($scope) {
  $scope.items = [
    {
      "item_id": 1,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 2,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 3,
      "user_id": 1,
      "created_at": "2015-05-08 05:32:00",
    }
  ];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<div ng-app="app">
 <div ng-controller="mainController">
    <div ng-repeat="item in items">
        <div>{{item.created_at}}</div> <!-- ここを同じ年月日のだったら、1回だけ表示にしたい -->
         <div>{{item.item_id}}</div>
    </div>
  </div>
</div>

2 件の回答 2

1

表示アイテムに絞り込むFilterを作成する事でご希望の動きを実現できます。

var app=angular.module("app",[]);
app.controller('mainController',['$scope', function ($scope) {
  $scope.items = [
    {
      "item_id": 1,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 2,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 3,
      "user_id": 1,
      "created_at": "2015-05-08 05:32:00",
    }
  ];
}
]);

app.filter('hoge', function() {
    return function(items) {
        var result = [];
        var preItem;

        angular.forEach(items, function(item){
            if(preItem && preItem.created_at == item.created_at){
                return;
            }
            result.push(item);
            preItem = item;
        });

        return result;
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
 <div ng-controller="mainController">
    <div ng-repeat="item in items | hoge"> <!-- ここでFilterを指定 -->
        <div>{{item.created_at}}</div> 
         <div>{{item.item_id}}</div>
    </div>
  </div>
</div>

別の方法として$scopeに関数を作る方法なども考えれれます。

var app=angular.module("app",[]);
app.controller('mainController',['$scope', function ($scope) {
  $scope.items = [
    {
      "item_id": 1,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 2,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 3,
      "user_id": 1,
      "created_at": "2015-05-08 05:32:00",
    }
  ];
  
  $scope.filterItems = function(){
        var result = [];
        var preItem;

        angular.forEach($scope.items, function(item){
            if(preItem && preItem.created_at == item.created_at){
                return;
            }
            result.push(item);
            preItem = item;
        });

        return result;    
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
 <div ng-controller="mainController">
    <div ng-repeat="item in filterItems()"> <!-- ここで関数を指定 -->
        <div>{{item.created_at}}</div> 
         <div>{{item.item_id}}</div>
    </div>
  </div>
</div>

Filterで対応する方法は、$scopeが異なる別のControlerなどでも使用可能ですが、
$Scopeに関数を作成する方法は、異なる$scopeでは使用できないので汎用的にしたい場合はFilterで対応した方が良いです。

現実的には、プロパティ名固定だと使用しにくいので、プロパティは引数でもらうなど対応されると尚良いと思います。

var app=angular.module("app",[]);
app.controller('mainController',['$scope', function ($scope) {
  $scope.items = [
    {
      "item_id": 1,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 2,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 3,
      "user_id": 1,
      "created_at": "2015-05-08 05:32:00",
    }
  ];
}
]);

app.filter('hoge', function($parse) {
  return function(items, propName) {
    var result = [];
    var preItem;
    var parse = $parse(propName);
    
    angular.forEach(items, function(item){
      if(preItem && parse(preItem) == parse(item)){
        return;
      }
      result.push(item);
      preItem = item;
    });

    return result;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
 <div ng-controller="mainController">
    <div ng-repeat="item in items | hoge:'created_at'"> <!-- ここでFilterを指定 -->
        <div>{{item.created_at}}</div> 
         <div>{{item.item_id}}</div>
    </div>
  </div>
</div>

(追記)
同一日付のアイテムを除外したいのかと思い回答していましたが
本当の質問は『日付の表示のみ一度出すようにしたい』と言う事なので、その回答を記載します。

ng-repate中は$indexで現在のindex値が取得できます。
これを用いてitems[$index-1]とする事で一つ前のアイテムを取得する事ができます。

よって、表示部分を以下のような条件にする事でご希望の動作になります。
{{items[$index-1].created_at === item.created_at ? '\u00A0' : item.created_at}}

var app=angular.module("app",[]);
app.controller('mainController',['$scope', function ($scope) {
  $scope.items = [
    {
      "item_id": 1,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 2,
      "user_id": 1,
      "created_at": "2015-05-09 05:32:00",
    },
    {
      "item_id": 3,
      "user_id": 1,
      "created_at": "2015-05-08 05:32:00",
    }
  ];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
 <div ng-controller="mainController">
    <div ng-repeat="item in items">
        <div>{{items[$index-1].created_at === item.created_at ? '\u00A0' : item.created_at}}</div>
        <div>{{item.item_id}}</div>
    </div>
  </div>
</div>

3
  • ありがとうございます。今後の汎用性を考えてFilterで作成してみたいと思います。いくつもサンプル提示いただき助かりました。 Commented 2015年5月9日 5:10
  • 同一日付のアイテムを除外したいのかと思い回答していましたが 本当の質問は『日付の表示のみ一度出すようにしたい』と言う事なので、その回答を追記しました。
    – hiro
    Commented 2015年5月9日 7:12
  • こちらこそ言葉が足らない部分すみません。対応いただきありがとうございます。なるほど、indexで以前の状態は取れるのですね。こちらで無事対応できそうそうです、助かりました。 Commented 2015年5月10日 2:49
1

同じ値のものは1回しか出さないということで良ければ、
AngularUIを使えばいけそうです。

直前の要素との比較がしたいということであれば、この辺が参考になるかもしれません。
How to obtain previous item in ng-repeat?

var app = angular.module('app', ['ui.filters']);
app.controller('mainController', ['$scope', function($scope) {
    $scope.items = [{
    "item_id": 1,
    "user_id": 1,
    "created_at": "2015-05-09 05:32:00",
  }, {
    "item_id": 2,
    "user_id": 1,
    "created_at": "2015-05-09 05:32:00",
  }, {
    "item_id": 3,
    "user_id": 1,
    "created_at": "2015-05-08 05:32:00",
  }, {
    "item_id": 4,
    "user_id": 1,
    "created_at": "2015-05-09 05:32:00",
  }, {
    "item_id": 5,
    "user_id": 1,
    "created_at": "2015-05-10 05:32:00",
  }, {
    "item_id": 6,
    "user_id": 1,
    "created_at": "2015-05-08 05:32:00",
  }];
}]);
<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-ui/0.4.0/angular-ui.min.js"></script>

<div ng-app="app">
  <div ng-controller="mainController">
    <h4>Full:</h4>
    <div ng-repeat="item in items">
      <div>{{item.created_at}}</div>
      <div>{{item.id}}</div>
    </div>

    <h4>Filter:</h4>
    <div ng-repeat="item in items | unique:'created_at'">
      <div>{{item.created_at}}</div>
      <div>{{item.id}}</div>
    </div>
  </div>
</div>

1
  • 回答ありがとうございます。正確には、日付の表示のみ一度出すようにしたいのです。同じ日付データはまとめる(例えば、5月9日に3件投稿があれば「5月9日」という表記を一度だけ出し、投稿自体は3件表示、5月8日が2件だったら、「5月8日」という表記だけ一度だし、その後に2件表示)のが希望です。 Commented 2015年5月9日 5:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。