List of only one property of an array of objects

Question

I want the Angular list to show all instances of the same property of an object from an array of objects, and nothing more - for example, only countries.

$scope.testSites = [
                { "site": "Testsite1", "country": "Country1", "customer": "Customer1"},
                { "site": "Testsite2", "country": "Country2", "customer": "Customer2"}
            ];
$scope.chosenCategory = 1;
$scope.categoryNames = ["site", "country", "customer"];
$scope.aspect = $scope.categoryNames[$scope.chosenCategory];

However, I want to use the 'aspect' variable above to select the property that will be displayed in the list. Thus, something like {{x.country}}, although it works, is not enough. I tried this, but it returns an empty list:

<table border="1" class="list-group-item list-group-item-success">
            <tr>
                <th>{{aspect | capitalize}}</th> 
            </tr>

            <tr ng-repeat="x in testSites | orderBy:myOrderBy">
                <td>
                    {{x.aspect}}
                </td>

            </tr>
        </table>

Is there something I can do?

Answer 1

You can do with the notation {{ x[aspect] }}- []. It evaluates the expression and uses the result to find the property.

You can find the demo here.