0

I just created a directive so that I'm able to reuse some code all over my app, but now I'm a bit stuck..

I have a directive that checks an object inside another object from a json file:

{
    "data" : [ {
            "iID" : 1,
            "iType" : 5,
            "objTimer" : [{
                    "iDay" : 0,
                    "iTm" : 0,
                    "fSP" : 9
                }, {
                    "iDay" : 0,
                    "iTm" : 3600,
                    "fSP" : 22
                },{
                    "iDay" : 1,
                    "iTm" : 63000,
                    "fSP" : 9
                }, {
                    "iDay" : 1,
                    "iTm" : 76500,
                    "fSP" : 28
                }, {
                    "iDay" : 2,
                    "iTm" : 63000,
                    "fSP" : 9
                } ......
            ],
            .....
        } ]
}

and prints it onscreen, and this is the code:

<li ng-repeat="timers in currentRoom.objTimer">
    <example-directive 
        timer="timers" 
        day="'{{timers.iDay}}'" 
        title="'Title'">
    </example-directive>
</li>

my directive.js code is the following:

angular.module('app.exampleDirective', [])
    .directive('exampleDirective', function () {
        return {
            restrict: 'E',
            scope: {
                timer: '=',
                day: '@',
                title: '='
            },
            replace: true,
            templateUrl: "/templates/directiveTemplate/exampleDirective.html",
            controller: function ($scope) {
                console.log($scope.timer)
            }
        };
    })

and the directive template:

<div>
    {{title}} - {{day}}
    <pre>{{timer}}</pre>
</div>

Everything works as supposed to, but what I don't really know that what is the best way to filter the data.

The result from my directive on page is the following (I'm printing the values as JSON for the moment):

<div class="scroll">
  <!-- ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
       <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
          Title - '0'
          <pre class="ng-binding">{"iDay":0,"iTm":0,"fSP":9}</pre>
        </div>
    </li>
  <!-- end ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
       <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
          Title - '0'
          <pre class="ng-binding">{"iDay":0,"iTm":3600,"fSP":22}</pre>
       </div>
    </li>
   <!-- end ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
        <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
           Title - '0'
           <pre class="ng-binding">{"iDay":0,"iTm":16200,"fSP":9}</pre>
        </div>
    </li>
    <!-- end ngRepeat: timers in currentRoom.objTimer -->

and so on...

What I'd like to do is basically divide them into block, so that all the one with iDay = 0 will be printed as a unique block.

Something pretty much like the following:

Days: 

 Day-0:    
   - ..    
   - ..    
   - ..
_____________________________________
 Day-1:
   - ..    
   - ..    
   - ..    
_____________________________________
  Day-2:
   - ..
   - ..

But using the same directive.

Any idea on how to do this?

I tried to add a data attribute day in the directive, but now I'm stuck...should I use it as another repeater inside the directive template and filter the data by @index?

If you need more details please comment.

Partha Sarathi Ghosh
  • 10,936
  • 20
  • 59
  • 84
Nick
  • 13,493
  • 8
  • 51
  • 98
  • 3
    take a look at groupBy http://stackoverflow.com/questions/25921427/angular-ng-repeat-groupby-and-keep-order or http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm – AlainIb Dec 22 '15 at 11:45
  • If i do like the above mentioned answer, i get an error: Unknown provider: toArrayFilterProvider <- toArrayFilter – Nick Dec 22 '15 at 11:57
  • ok, sorted. It works. thanks – Nick Dec 22 '15 at 12:11
  • if you find a working solution past in response. it will help – AlainIb Dec 22 '15 at 12:21
  • Just used groupBy exactly as seen in this answer here: http://stackoverflow.com/questions/25921427/angular-ng-repeat-groupby-and-keep-order – Nick Dec 22 '15 at 12:21

0 Answers0