Angularjs - load element based on json input

Question

I have a situation where I receive a json object and within json data is a section that look something like this

{
  "elName": "elCst3",
  "label": "Label 3",
  "type": "input",
  "content": "some text",
}

This is assigned to $scope.data

The type expression in the object can be input or textarea

In my html template, depending on which value the TYPE is I am supposed to load either a textfield (input/text) or textarea element.

Pseudo logic of it is something like this..

IF {{data.type}} == "input" then

    <input id="data.elName" type="text" value="{{data.content}}">

ELSE IF {{data.type}} == "textarea" then

    <textarea id="data.elName">{{data.content}}</textarea>
ENDIF

How could I in the best and simplest way approach this in Angularjs?

Thanks!

Maxim Shoustin · Accepted Answer · 2013-12-13 23:05:05Z

2

I would use ng-if in your case. Something like:

HTML

<label ng-repeat="val in list">
    <div ng-if="val.type == 'input'">
        <input id="data.elName" type="text" value="{{val.content}}"></input>
    </div>
    <div ng-if="val.type == 'textarea'">
        <textarea id="data.elName">{{val.content}}</textarea>
    </div>
</label>

JS

 $scope.list = [{
        "elName": "elCst3",
            "label": "Label 3",
            "type": "input",
            "content": "some text for input"
    }, {
        "elName": "elCst4",
            "label": "Label 3",
            "type": "textarea",
            "content": "some text for textarea"
    }];

Demo Fiddle

edited Dec 13, 2013 at 23:05

answered Dec 13, 2013 at 22:59

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

GRowing Over a year ago

I'll try this out and come back to comment. thanks! Could you just hint at what "fessmodule.$inject = ['$scope'];" does?

Maxim Shoustin Over a year ago

@PersistentNewbie its just injection of scope. You can remove it

Community · Accepted Answer · 2017-05-23 11:56:50Z

0

If you want to switch into different HTML parts dependent on the JSON data you try to show in the view, ngSwitch is an option:

<div ng-repeat="val in list">
    <div ng-switch="val.type">
        <div ng-switch-when="input">
            <input type="text" value="{{val.content}}"></input>
        </div>
        <div ng-switch-when="textarea">
            <textarea cols="40" rows="5">{{val.content}}</textarea>
        </div>
        <div ng-switch-default>
            Unknown val type: {{val.type}}
        </div>
    </div>
</div>

By the way: I had a similar question ...

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 27, 2015 at 12:14

Peter Kennedy

5716 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angularjs - load element based on json input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related