AngularJS: Name a variable using another's var

Question

I'm new to AngularJS and I'm still exploring its possibilities. Currently I'm stuck with this problem: How can I name a variable using another's variable value?

For example I have something like this in my controller:

    $scope.item_foo = 'Foo';
    $scope.item_bar = 'Bar';

I can access the values with this:

    {{item_foo}}
    {{item_bar}}

So far so good, but now I want to display them dynamically. I have an object with 'foo' and 'bar' and I loop it with ngRepeat. How can I do something like that:

    {{item_{{variable_with_value_foo_or_bar}}}} // should print Foo and Bar

Thank you for any of your help!

Answer 1

It seems like it would be better to use an object to store the data, rather than a bunch of things at the $scope level...:

$scope.item = {foo: 'Foo', bar: 'Bar'};
// ...
$scope.variable_with_value_foo_or_bar = 'foo';

Then access with:

{{item[variable_with_value_foo_or_bar]}}

Answer 2

Within your template, this refers to the current scope, so you can do:

{{ this[ 'item_' + variable_with_value_foo_or_bar ] }}

There are probably better ways to perform what you're trying to do, but hopefully this answers your question.