Table styling with LESS - angularjs

Question

This question is about styling a table which is created inside an AngularJS directive. I have an array of objects passed to the directive from HTML file. The directive creates a table and shows each object of the array in a row.
Now my question: There is a self-defined JSON field in each object called name. Styling is done by LESS technology and I want to have a thick separating line behind each row when 'name == david'. Please consider this condition can be different for example when 'rowID%3 ==0' and etc. My general question is how can I access this objects in LESS file and how can I make conditional styling inside LESS.

Answer 1

I'm making a lot of assumptions since you didn't include any code or markup, but in Angular this is a very basic, simple problem, and is independent of whether you are using LESS, Sass, or just plain CSS:
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items track by $index" ng-class="{'thick-separator': isNameDavid(item) || $index%3 == 0}">
<td>{{item.propOne}}</td>
<td>{{item.propTwo}}</td>
<td>{{item.propThree}}</td>
</tr>
</tbody>
</table>
In your controller:
$scope.isNameDavid = function(item) {
return item.name == 'david';
};
Using the ngClass directive and the $index scope variable that is introduced by the ngRepeat directive, you can easily assign a thick-separator class to table rows, conditionally.
Now, it makes no difference if you are using LESS, Sass, or plain CSS:
.thick-seperator {
border-top: 5px solid black;
}
If, however, you are trying to say that you can't change the Angular code and you need to be able to style purely with LESS, then you can style using attribute and nth-child selectors. Note that these are available in plain CSS and LESS is not needed:
table tbody tr:nth-child(3n+3), table tbody tr[data-name="david"] {
border-top: 5px solid black;
}