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

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

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

更多：

Ye Liu和我试图提出的问题是你的标记包含错误。您不能在期望表达式的角度属性中嵌套。插值表达式本身也是如此;您无法在{{ }}内嵌套{{ }}。有关详细信息，请参阅此simple demonstration。

我会回复你如何做动态表单元素。

Answer 2

Ok找到以下内容：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>

如何在AngularJS中绑定HTML中的动态对象属性？

2 个答案: