javascript - 如何在AngularJS中的HTML中绑定(bind)动态对象属性？

我有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]。但是实际上我想要标签内的实际值或屏幕上呈现的实际下拉列表。

最佳答案

不知道这是否可以解决所有问题，但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]">

否则请查看this。可以找到源代码here

更多：

我和Ye Liu试图说明的是您的标记包含错误。您不能将插值嵌套在需要表达式的角度属性中。插值表达式本身也是如此。您不能将{{ }}嵌套在{{ }}中。有关更多信息，请参见此simple demonstration。

我会回头给您如何做动态表单元素。