Combining ng-repeat with ng-if with choice lists

[btlindsay]

Hi everyone,

In a widget, I've created a table to be populated with some data from an Incident record, with an icon that displays in the relevant column. So if the record has a category of inquiry, the panda icon will be in the inquiry column, like so:

	inquiry	software	hardware	network	database
Category	🐼

It works hunky-dory as long as I write out each line, with the ng-if="c.data.incident.category == 'inquiry'", but I'd like to use ng-repeat with it so that I only have one line of code. I'm use ng-repeat="choice in c.data.choices" to successfully populate the table headers, but I can't get seem to combine it successfully with the ng-if.

I've tried ng-repeat="choice in c.data.choices" ng-if="c.data.incident.category == choice"
I've tried ng-repeat="choice in c.data.choices" ng-if="c.data.incident.category == {{choice}}"

I've tried ng-repeat="choice in c.data.choices" ng-if="c.data.incident.category == c.data.choices"

I've tried ng-repeat="choice in c.data.choices" ng-if="c.data.incident.category == {{c.data.choices}}"

If my icon shows up at all, it's *always* in the inquiry column, even though the record itself is set to software. But if I do a hardcoded check with the ng-if="c.data.incident.category == 'software'", then it works fine.

At this point, I'm just clutching at straws to see how to make it work 😂 Any ideas?

[sasi_v · Accepted solution]

Hi @btlindsay 

I am able to combine ng-repeat and ng-if

HTML:

<div><table class="table table-primary card card-default">
<thead>
<tr>
<th> </th>
<th class="text-center" ng-repeat="s in c.data.choices">{{s}}</th>
</tr>
</thead>
<tbody>
<tr>
<td> Investment Type </td>
<td class="text-center" ng-repeat="x in c.data.choices" ng-if="c.data.category==x" >{{x}}</td>
</tr>
</tbody>
</table>
</div>

Server side script

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.choices=["Inquiry / Help","Software","Hardware","Network","Database"]
data.category="Inquiry / Help"

})();

Preview of the widget:

Despite ng-repeat is looping through all the categories, ng-if is limiting to show only Inquiry/help category.

Regards,

Sasikanth

If this solution was able to help you with your problem, please mark it as helpful.

Follow me on Linkendin

[btlindsay]

That's awesome, thank you, Sasikanth!

I think I went wrong when I put the ng-if within the path element, instead of putting it in the svg element. It wasn't until I pasted it here that I saw the path element was in its own div tags. It's the first time I've ever worked with svgs.