CODEWITHSUNDEEP
angularjs
Alexandros Marinos
Alexandros Marinos

Reputation: 1396

Variable input type in Angular view

I'm making a questionnaire application, where the set of questions (and the type of answers) will be set by the server. Here's a sampling of what's on my scope (it's coffee-script, but you'll get the idea):

        $scope.groups = [
        {
            id: "basics"
            text: "The Basics"
            questions: [
                {
                    id: "project_text"
                    text: "What's the name of the project?"
                    type: {
                        name: "Short Text"
                    }
                }
                {
                    id: "currency_type"
                    text: "Choose your currency"
                    type: {
                        name: "Enum"
                        options: ["$", "£", "€"]
                    }
                }
            ]
        }
        {
            id: "dev"
            text: "Development"
            questions: [
                {
                    id: "dev_cost"
                    text: "How much will development cost?"
                    type: {
                        name: "Integer"
                    }
                }
            ]
        }
    ]

The issue is that in my view, I don't know beforehand what input I will need, as that is set by the state of the scope (you see Enum, Integer, Short Text above, there's more later)

What's a good way to do this in Angular? My first idea is to just have a directive that based on the params either activates the appropriate directive (maybe by injecting the relevant element into the dom, is this even possible?) or contains all the necessary inputs in itself and injects the appropriate one. However, I'm not sure this is the appropriate way to do this.

Anyone willing to take a crack at this? Thanks!

Upvotes: 1

Views: 646

Answers (1)

holographic-principle
holographic-principle

Reputation: 19738

You could use

ng-show="expression"

to show some elements only if the expression evaluates to true

For example:

<div ng-show="foo.bar">I will be visible when foo.bar exists</div>

If you need more complex conditionals, use ng-switch, or the ui-if directive of AngularUI which is a less verbose way of doing the same switch.

Upvotes: 1

Related Questions