Angular JS Nested Array Object as HTML value

Question

I have this data:

Continent":"Asia",
"Countries":{
            "Japan":[
                {
                    "Id":"1",
                    "ColumnName":"Osaka",
                    "Type":"Label", } ] }

I wanted to use the id and type as HTML tag attribute value like:

if label:

"<label> {{ColumnName}} </label>"

if textbox:

"<input type="text" value"Osaka">"

if dropdown:

"<select>
  <option value="Osaka">Osaka</option> </select>"

Is that possible?

Thanks for all the ideas you can share! :)

webernado · Accepted Answer · 2014-08-20 17:09:01Z

1

If the data is defined in your controller as

$scope.data = {
    "Continent":"Asia",
    "Countries":{
        "Japan":[
            {
                "Id":"1",
                "ColumnName":"Osaka",
                "Type":"Label", 
            }]
        }
    }

Then you can access these in your html like so:

<label>{{data.Countries.Japan[0].ColumnName}}</label>
<input type="text" ng-value"{{data.Countries.Japan[0].ColumnName}}">
<select>
    <option ng-value="{{data.Countries.Japan[0].ColumnName}}">{{data.Countries.Japan[0].ColumnName}}</option> 
</select>

answered Aug 20, 2014 at 17:09

webernado

512 bronze badges

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

2 Comments

Ricalyn Haboc Over a year ago

Thanks for that webernado, but what if it's not always a dropdown? What if it can be a label, a textbox?

webernado Over a year ago

If you would like a list of labels or textboxes you can use ng-repeat to loop over the array of countries and display the ColumnName for each.

Collectives™ on Stack Overflow

Angular JS Nested Array Object as HTML value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related