How to control output in ng-repeat from another ng-repeat?

Question

Angular

There is an array of objects whose properties need to be displayed in the table.

<tr ng-repeat="item in mainData.items">
    <td>{{item.name}}</td>
    <td>{{item.category}}</td>
    <td>{{item.importance}}</td>
   <td>{{item.status}}</td>
</tr>

But the properties will increase and not always all of them need to be displayed. I want to add a control array with a list of properties required for output:

<tr ng-repeat="item in mainData.items">
   <td ng-repeat="prop in mainData.itemProps">{{item.prop}}</td>
</tr>

There are empty cells. What am I doing wrong?

Answer 1

How to control output in ng-repeat from another ng-repeat?

ngRepeat is a declarative primitive, you cannot "manage" anything through it and should not want to at all.
You must control the data you push into the viewmodel ($scope). And only so. That is, by changing the control array in js, we form a new plate and ng-repeat simply displays this plate. Everything is simple and clear, easy to debug, minimum code.

Answer 2

<tr ng-repeat="item in mainData.items">
   <td ng-repeat="prop in mainData.itemProps">{{item.prop}}</td>
</tr>

To me, that's bullshit. If you need to display certain properties, and when you click on a button (or other action), display additional properties, then use the ng-show, ng-hide directives.

Answer 3

{{item[prop]}} ??