Concatenation in HTML using AngularJS

Question

My AngularJS controller (called 'search') has the variables:

this.redInfo = [...];
this.blueInfo = [...];
this.greenInfo = [...];
this.tableSelector = ''; //this can either be 'red', 'blue', or 'green'

I'm trying to do an ng-repeat where the info that gets repeated is dependent on the tableSelector. Is this possible? This is what I have now:

<div ng-repeat="row in {{'search.' + search.tableSelector + 'Info'}} track by $index">

Answer 1

What you're currently attempting isn't possible. You can make a method that returns the appropriate repeat array:

this.getColorArray = function() {
   if (this.search.tableSelector == "red") return this.redInfo
   ...
}

Then repeat over that:

<div ng-repeat="row in search.getColorArray() track by $index">

Depending on the array site and other watchers on the page, this could impact performance. If you know where tableSelector changes - you can always set your repeat array at that point and avoid the extra overhead in the $digest cycles.

Answer 2

Use a bracket notation property accessor:

<div ng-repeat="row in search[search.tableSelector + 'Info'] track by $index">