ng class is not applied in this condition

Question

I have 3 loops

1-getting the name of the week day 2-getting the number of the day 1 and 2 came from js function.

JavaScript

var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        $scope.rangetxt = [];
        var d1 = new Date(fromdate);
        while (d1 <= new Date(todate)) {
            //alert(DAYS[d.getDay()]);
            $scope.rangetxt.push({ Day: DAYS[d1.getDay()] });
            //console.log($scope.rangetxt);
            d1 = new Date(d1.getTime() + (24 * 60 * 60 * 1000));
        }
        $scope.dateArray = [];
        var currentDate = moment(fromdate);
        var stopDate = moment(todate);
        while (currentDate <= stopDate) {
            $scope.dateArray.push({ Day: moment(currentDate).format('DD') })
            currentDate = moment(currentDate).add(1, 'days');
        }

HTML

<td class="employeedata">
                                        <table class="table table-bordered table-hover myTable" style="font-size: 10px;" id="table2">
                                            <thead>
                                                <tr>
                                                    <th rowspan="3">Type</th>
                                                </tr>
                                                <tr>
                                                    <!--<th rowspan="2">Type</th>-->
                                                    <th ng-repeat="r in rangetxt">{{r.Day}}</th>

                                                    <!--<th rowspan="3"></th>-->

                                                </tr>
                                                <tr>
                                                    <th ng-repeat="dt in dateArray">{{dt.Day}}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="df in duration | filter : du.StaffKey | limitTo:3 ">


                                                    <td>{{df.TypeTransDesc}}</td>

                                                    <td ng-repeat="x in dateArray " >

                                                        <span ng-repeat="(key,value) in df" ng-if="key=='D'+x.Day" **ng-class="{{df.['C'+x.Day]}}">**

                                                            {{value}}



                                                        </span>




                                                    </td>


                                                </tr>

                                            </tbody>
                                        </table>
                                    </td>

I am successfully show the data inside its cell but i cant apply the class, i have 6 classes , i want to apply them based on a condition don't know why and how any idea, Thanks in advance

Answer 1

You can get the class name from the controller, create a function on the controller and call it from the html: html:

ng-class="getDfClass(df, x.day)"

and in the controller:

getDfClass(df, day) {
  return df['C'+day];
}

this assumes that the result of df['C'+x.Day] is a string with the name of the class you want to apply to the span