current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
add comment

2 Answers

up vote 2 down vote

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.

share|improve this answer
1  
The same can be applied to the label too: <label ng-show="MyData.FieldType == 'label'">{{MyFieldModelData[MyData.FieldName]}}</label> –  Ye Liu Mar 12 at 14:55
    
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 Mar 13 at 3:01
add comment
up vote 0 down vote accepted

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>
share|improve this answer
1  
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. –  null Mar 13 at 8:08
    
@null Thanks. Yes, there was syntax error above. I have fixed it now. –  Pawan Mar 17 at 16:57
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.