How to bind dynamic object properties in HTML in AngularJS?

Question

I have 2 model data objects which I added to $scope. They are $scope.MyFieldModelDataand$scope.ScreenModelData.

ScreenModelData is like:

0: Object
    $$hashKey: "00R"
    FieldName: "SomeLabelName"
    FieldType: "label"

1: Object   
    $$hashKey: "00R"
    FieldName: "SomeDropdownName"
    FieldType: "dropdown"

And MyFieldModelData is like:

SomeLabelName: "Hello World"
SomeDropdownName: Array[2]  --this contains the dropdown data

I have to create a table with ng-repeat and use these model data objects to dynamically add controls on each table row. Some of the rows will have labels, some will have dropdowns and some will have hyperlinks. But this is in completely random order, so I cannot hard code anything.

I am using the following HTML:

<table class="table">
    <tbody>
        <tr ng-repeat="MyData in ScreenModelData">
            <td>
                <label ng-show="MyData.FieldType == 'label'">{{MyFieldModelData[{{MyData.FieldName}}]}}</label>
                <select ng-show="MyData.FieldType == 'dropdown'" 
                        ng-options="MyDDLData.Code as MyDDLData.Description for MyDDLData in MyFieldModelData[{{MyData.FieldName}}]">
                </select>
            </td>
        </tr>
    </tbody>
</table>

This renders the table but render the label and html as: MyFieldModelData[SomeLabelName] and for dropdown as MyFieldModelData[SomeDropdownName]. But actually I wanted the actual value inside the label or the actual dropdown rendered on the screen.

null · Accepted Answer · 2014-03-13 07:58:56Z

3

Not sure if this solves everything but the ng-option attribute does not interpolate sub expressions. Change the ...

ng-options="MyDDLData.Code as MyDDLData.Description for MyDDLData in MyFieldModelData[{{MyData.FieldName}}]">

... to ...

ng-options="MyDDLData.Code as MyDDLData.Description for MyDDLData in MyFieldModelData[MyData.FieldName]">

Otherwise have a look at this. Source code can be found here

More:

The point Ye Liu and I were trying to make is that your markup contains errors. You cannot nest interpolation in angular attributes that expect an expression. Same goes for interpolation expressions itself; you cannot nest a {{ }} within a {{ }}. See this simple demonstration for more info.

I'll get back to you how to do dynamic form elements.

edited Mar 13, 2014 at 7:58

answered Mar 12, 2014 at 14:40

null

7,9163 gold badges39 silver badges38 bronze badges

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

2 Comments

Ye Liu Over a year ago

The same can be applied to the label too: <label ng-show="MyData.FieldType == 'label'">{{MyFieldModelData[MyData.FieldName]}}</label>

Pawan Pillai Over a year ago

Sorry this did not work. Really not getting how to implement this. I just want some labels and dropdowns based on some condition on the repeater. I tried to use ng-init also to create scope variables in html markup, but that also only resolves to first level.

Pawan Pillai · Accepted Answer · 2014-03-17 16:56:29Z

0

Ok found the following: AngularJS is actually very very good in evaluating expressions and even evaluating when expression is in property part of object.

My code was almost there, but was not working because I had not added ng-model attribute in the dropdown (though I still need to work on the label part).

Once I added that, I am getting the dropdown properly. Here is the updated code:

<table class="table">
    <tbody>
        <tr ng-repeat="MyData in ScreenModelData">
            <td>
                <label ng-show="MyData.FieldType == 'label'">MyFieldModelData[{{MyData.FieldName}}]</label>
                <select ng-show="MyData.FieldType == 'dropdown'" ng-model="SomeThing"
                        ng-options="MyDDLData.Code as MyDDLData.Description for MyDDLData in MyFieldModelData[{{MyData.FieldName}}]">
                </select>
            </td>
        </tr>
    </tbody>
</table>

edited Mar 17, 2014 at 16:56

answered Mar 13, 2014 at 6:33

Pawan Pillai

2,0856 gold badges40 silver badges68 bronze badges

2 Comments

null Over a year ago

Either you're using a different version of Angular or the markup shown here is not the same as you're using. Both the expressions {{MyFieldModelData[{{MyData.FieldName}}]}} and MyDDLData.Code as MyDDLData.Description for MyDDLData in MyFieldModelData.{{MyData.FieldName}} will not work and probably shouldn't. Please let me know if I'm incorrect by posting it in a plunker.

Pawan Pillai Over a year ago

@null Thanks. Yes, there was syntax error above. I have fixed it now.

Collectives™ on Stack Overflow

How to bind dynamic object properties in HTML in AngularJS?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related