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
Post a Comment