CODEWITHSUNDEEP
angularjsangularjs-ng-repeatng-class
Akash khan
Akash khan

Reputation: 979

ng-class add depending on group date data

I have some data in an array name with $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). I want to 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 it will be in ng-repeat

Upvotes: 0

Views: 444

Answers (3)

Sreekanth
Sreekanth

Reputation: 3130

If you do have a mapping between dates and colors, it would be very simple.

Here is what you could 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 your looking at grouping the dates with same color, here is what you could do.

Here is an 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 by $index">
      <div ng-class="dateObj.color">
        {{dateObj.date}}
      </div>
    </div>

  </div>
</div>

Upvotes: 1

ngCoder
ngCoder

Reputation: 2105

Simple and different approach using ng-style just create an object 

$scope.colors = {
    "02-05-2016": "{'background-color':'blue'}",
    "04-05-2016": "{'background-color':'red'}",
    "05-05-2016": "{'background-color':'green'}"
  };

and access the colors in ng-style

UPDATE

Using ng-class as you want to apply color 1 , color 2 color 1 ....so on to achieve this you can do like below.Here the $even and $odd are from ng-repeat

<p ng-class="{'color1':$odd , 'color2':$even}">{{x.date}}</p>


var app = angular.module("app", []);
app.controller('Ctrl', function($scope) {

  $scope.data = [{
    date: '02-05-2016'
  }, {
    date: '02-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '05-05-2016'
  }, {
    date: '05-05-2016'
  }, ];

  $scope.colors = {
    "02-05-2016": "{'background-color':'blue'}",
    "04-05-2016": "{'background-color':'red'}",
    "05-05-2016": "{'background-color':'green'}"
  };
});
.color1 {
  background-color:red;
 
}
.color2 {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">

  <div ng-repeat="x in data track by $index">

    <!--<p ng-style="{{colors[x.date]}}">{{x.date}}</p> -->
    
    <p ng-class="{'color1':$odd , 'color2':$even}">{{x.date}}</p>
  </div>

</div>

Upvotes: 0

Larry Turtis
Larry Turtis

Reputation: 1916

Example here. At it's simplest, you could do this.

<ul>
  <li ng-class="{
  'color1':datum.date === '02-05-2016' || datum.date === '05-05-2016',
  'color2':datum.date === '04-05-2016'
  }"
  ng-repeat="datum in data">{{datum.date}}</li>
</ul>

If you wanted something more extensible, you chould use a function to check (example here)

In your view:

<ul>
  <li ng-class="check(datum.date)" ng-repeat="datum in data">{{datum.date}}</li>
</ul>

In your controller:

$scope.check = function(date) {
  if (date === '02-05-2016' || date === '05-05-2016') return 'color1';
  return 'color2';
}

Upvotes: 0

Related Questions