CODEWITHSUNDEEP
javascriptcssangularjs
eeadev
eeadev

Reputation: 3852

get current date in ng-style - Angularjs

In my angular app, I need the background color of my table row to be red colour if the date is equal to today.

Until now, I manage to set red only if equal to '2016-01-31',

How can I make it to work if '2016-01-31' was the current date?

        <tbody>
            <tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-style="{'background-color': issue.due_date == '2016-01-31' ?  'red': 'white'}" ng-click="setSelected()">
                <td>{{issue.id}}</td>
                <td>{{issue.project.name}}</td>
                <td>{{issue.subject}}</td>
                <td>{{issue.start_date}}</td>
                <td>{{issue.due_date}}</td>
                <td>{{issue.priority.name}}</td>

            </tr>

        </tbody>

Upvotes: 1

Views: 1029

Answers (2)

electrophanteau
electrophanteau

Reputation: 1332

use a function to define if your value is today

   <tbody ng-controller="MyCtrl">
        <tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-style="{'background-color': isToday(issue.due_date) ?  'red': 'white'}" ng-click="setSelected()">
            <td>{{issue.id}}</td>
            <td>{{issue.project.name}}</td>
            <td>{{issue.subject}}</td>
            <td>{{issue.start_date}}</td>
            <td>{{issue.due_date}}</td>
            <td>{{issue.priority.name}}</td>

        </tr>
    </tbody>

and define this function in your app

.controller('MyCtrl', function($scope){
    $scope.today = new Date();

    $scope.isToday = function(compareDate){
       var today = $scope.today;
       return compareDate == today.getFullYear() + '-' + today.getDate() + '-' + today.getMonth();
    }
})

i would also suggest to use classes instead of inline styles, see ng-class for further information

Upvotes: 1

Nitin Garg
Nitin Garg

Reputation: 896

You can create a local variable in the scope something like

$scope.currentDate = new Date();

and then 

ng-style="{'background-color': issue.due_date == currentDate ?  'red': 'white'}

I think date format should be consistent in due_date & currentDate, so please make sure that they are consistent.

Hope this helps.

Upvotes: 0

Related Questions