如何在AngularJS中綁定HTML中的動態對象屬性？

Question

我有2個模型數據對象，我添加到$scope 。 它們是$scope.MyFieldModelData和$scope.ScreenModelData.

ScreenModelData如下：

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

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

而MyFieldModelData就像：

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

我必須使用ng-repeat創建一個表，並使用這些模型數據對象在每個表行上動態添加控件。 有些行會有標簽，有些會有下拉列表，有些會有超鏈接。 但這是完全隨機的順序，所以我不能硬編碼任何東西。

我使用以下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>

這將呈現表，但將標簽和html呈現為： MyFieldModelData[SomeLabelName]並將下拉MyFieldModelData[SomeDropdownName]為MyFieldModelData[SomeDropdownName] 。 但實際上我想要標簽內的實際值或屏幕上呈現的實際下拉列表。

Answer 1

不確定這是否解決了所有問題，但ng-option屬性不會插入子表達式。 改變......

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

... 至 ...

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

否則看看這個 。 源代碼可以在這里找到

更多 ：

Ye Liu和我試圖提出的觀點是你的標記包含錯誤。 您不能在期望表達式的角度屬性中嵌套插值 。 插值表達式本身也是如此; 您無法在{{ }}嵌套{{ }} 。 有關詳細信息，請參閱此簡單演示 。

我會回復你如何做動態表單元素。

Answer 2

好的發現如下：AngularJS實際上非常非常適合評估表達式，甚至評估表達式何時屬於對象的屬性部分。

我的代碼幾乎就在那里，但是因為我沒有在下拉列表中添加ng-model屬性而沒有工作（盡管我仍然需要處理標簽部分）。

一旦我添加了，我正確地得到了下拉列表。 這是更新的代碼：

<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>