ng-if and col col-50 don't seem to go together? - html

Question

I am trying to generate a table using angular code in HTML. Now I seem to have how I want the table to look which is how I have set up this code:
<div class="row">
<div class="col col-25">Date</div>
<div class="col col-50">Name of Customer</div>
<div class="col col-25">Hours Used</div>
</div>
What I have done is generated a list in angular code (which is done correctly) and I have ordered them in a certain way with Date being the first entry and Hours Used being the last. To generate the table in HTML, I use this code:
<div class="row">
<div ng-repeat="B in ConvertToTableRow(T) track by $index">
<div class="col col-25" ng-if="$index == 0">
{{ B }} &nbsp
</div>
<div class="col col-50" ng-if="$index == 1">
{{ B }} &nbsp
</div>
<div class="col col-25" ng-if="$index == 2">
{{ B }} &nbsp
</div>
</div>
</div>
Everything in the first row works well and styled to what I need it to be but the second entry (when the index is 1) will never style its table to a col-50 but instead will stick with a col-25. Now I have tested to see the if the values are equal to 1 or 2 but it seems that is working correctly and the infomation is also coming out correctly but its just not styling correctly.
Is it possible to style a table this way using Angular and HTML?

Answer 1

Would it not be better to use ng-class? I think there's an even better way, but this is just off the top of my head. I hope this helps! :) Documentation for ng-class
<div class="row">
<div ng-repeat="B in ConvertToTableRow(T) track by $index">
<div class="col" ng-class="{'col-25': $index % 3 !== 1, 'col-50': $index % 3 === 1}">
{{ B }} &nbsp
</div>
</div>
</div>