9973


Monaca  
ONSEN UI 1.3.0  
AngularJS 1.3

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

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

[code]

    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",
        }
      ];
    }
    ]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-05-08T21:38:53.397
9968
2015-05-09T07:10:33.063
2015-05-09T01:49:33.707
4191
7852
question
javascript monaca angularjs
ng-repeat中に前の要素と比較して表示の出し分けをしたい


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

[code]

    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;
        };
    });
[/code]

[code]

    <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>
[/code]

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

[code]

    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;    
      }
    }]);
[/code]

[code]

    <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>
[/code]

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

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

[code]

    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;
      };
    });
[/code]

[code]

    <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>
[/code]

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

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

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

[code]

    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",
        }
      ];
    }
    ]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-05-09T01:36:45.440
9973
2015-05-09T07:10:33.063
2015-05-09T07:10:33.063
4191
4191
9968
answer


同じ値のものは1回しか出さないということで良ければ、  
[AngularUI](https://angular-ui.github.io/)を使えばいけそうです。

直前の要素との比較がしたいということであれば、この辺が参考になるかもしれません。  
[How to obtain previous item in ng-
repeat?](https://stackoverflow.com/questions/15412897/how-to-obtain-previous-
item-in-ng-repeat)

[code]

    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",
      }];
    }]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-05-09T01:37:28.300
9974
2015-05-09T01:37:28.300
2017-05-23T12:38:56.467
-1
3516
9968
answer