angularjs - ng-class add depending on group date data -


i have data in array name $scope.data variable.

[  {date:'02-05-2016'},  {date:'02-05-2016'},  {date:'04-05-2016'},  {date:'04-05-2016'},  {date:'05-05-2016'},  {date:'05-05-2016'},  ...  ... ] 

i have 2 css class (color1,color2). want add class in ng-repeat of each date group like

02-05-2016 => color1 04-05-2016 => color2 05-05-2016 => color1 ... ... 

i can't figure out how in ng-repeat

if have mapping between dates , colors, simple.

here do:

var app = angular.module("sampleapp", []);    app.controller("samplecontroller", ["$scope",  function($scope) {    $scope.dates = [{      date: '02-05-2016'    }, {      date: '02-05-2016'    }, {      date: '04-05-2016'    }, {      date: '04-05-2016'    }, {      date: '05-05-2016'    }, {      date: '05-05-2016'    }];      }  }]);
.color1 {    background-color: #121212;    color: white;  }  .color2 {    background-color: #ababab;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  <div ng-app="sampleapp">    <div ng-controller="samplecontroller">      <div ng-repeat="dateobj in dates">        <div ng-class-odd="'color1'" ng-class-even="'color2'">          {{dateobj.date}}        </div>      </div>    </div>  </div>

if looking @ grouping dates same color, here do.

here example:

var app = angular.module("sampleapp", []);    app.controller("samplecontroller", ["$scope",    function($scope) {      $scope.dates = [{        date: '02-05-2016'      }, {        date: '02-05-2016'      }, {        date: '03-05-2016'      }, {        date: '04-05-2016'      }, {        date: '04-05-2016'      }, {        date: '05-05-2016'      }, {        date: '06-05-2016'      }, {        date: '07-05-2016'      }, {        date: '08-05-2016'      }, {        date: '09-05-2016'      }];          let currentcolor = "color1";      if ($scope.dates.length > 0) {        $scope.dates[0].color = currentcolor;      }        $scope.dates.reduce((prevobj, currentobj) => {        if (prevobj.date !== currentobj.date) {          currentcolor = currentcolor === 'color1' ? 'color2' : 'color1';        }        currentobj.color = currentcolor;        return currentobj;      });      }  ]);
.color1 {    background-color: #121212;    color: white;  }  .color2 {    background-color: #ababab;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  <div ng-app="sampleapp">    <div ng-controller="samplecontroller">      <div ng-repeat="dateobj in dates track $index">        <div ng-class="dateobj.color">          {{dateobj.date}}        </div>      </div>      </div>  </div>


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -