Angular using string as scope property name in view

Question

I am working on a project that pulls a number of questions from a JSON file.

The question formats vary but the issue is caused with a slider question type.

I run a HTTP request to get the JSON data and assign it to a scope called 'questions'. I then in the view repeat the questions and if (in this case) the question type is 'slider' I output the HTML.

The issue is that the slider uses a plugin and a scope variable with options. Because I have no control over the questions I am dynamically creating the scopes:

angular.forEach($scope.questions, function(question) {
    $scope[question.definedScopeName] = {
        // set up the slider config.
    };
});

The JSON question contains a defined name to use for the scope so for this example "sliderOne".

So... in my view I output the slider inside an ng repeat:

<rzslider
    class="question__slider"
    rz-slider-model="question.definedScopeName.value"
    rz-slider-options="question.definedScopeName.options">
</rzslider>

The issue here is that to set the model scope correctly I am using the data from the questions scope and therefore it is a string.

Anyway I can tell Angular that I actually want to set the model to the scope named $scope.'the defined scope name'.

Thanks!

your question seems to be a string hence question.<> cannot be done — Vinod Louis
– Vinod Louis, Commented Feb 13, 2017 at 14:28
@VinodLouis question is an object with a string named "definedScopeName". I want to set the model to the scope variable with the same name — Lovelock
– Lovelock, Commented Feb 13, 2017 at 14:32

georgeawg · Accepted Answer · 2017-02-13 16:21:49Z

2

Use bracket notation with the this keyword

<!--
<rzslider
    class="question__slider"
    rz-slider-model="question.definedScopeName.value"
    rz-slider-options="question.definedScopeName.options">
</rzslider>
-->

<!-- Use bracket notation -->
<rzslider
    class="question__slider"
    rz-slider-model="this[question.definedScopeName].value"
    rz-slider-options="this[question.definedScopeName].options">
</rzslider>

In Angular Expressions, the this keyword binds to the scope of the Angular Expression.

answered Feb 13, 2017 at 16:21

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lovelock Over a year ago

Just when I though this wasn't possible! Thank you very much.

Collectives™ on Stack Overflow

Angular using string as scope property name in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related