Question

我需要根据模板生成表格行。应该有一些变数。例如，persons[0].lastName对于下一行应为persons[1].lastName，依此类推。我想在html文件中存储模板。我使用angular-ui/ui-router。如何使这项工作？

示例：

<tr>
    <td>
        <div class="form-group first-name">
            <label>First name</label>
            <input type="text" ng-class="{'input-valid': isValidField('FirstName', persons[0].firstName)}" name="firstName" class="form-control input-name" ng-model="persons[0].firstName" ng-focus="focused('inputFirstName', 0)" placeholder="-">
        </div>

    </td>
    <td>
        <div class="form-group last-name">
            <label>Last name</label>
            <input type="text" ng-class="{'input-valid': isValidField('LastName', persons[0].lastName)}" name="lastName" class="form-control input-name" ng-model="persons[0].lastName" ng-focus="focused('inputLastName', 0)" placeholder="-">
        </div>

    </td>
</tr>

更新

我发现ui路由器supports resolution of dependent objects并且它注入控制器。我在其中使用resolve和$http成功获得了html字符串。现在我需要将1替换为每次迭代的相关数字。这样做的最佳做法是什么？

更新2

我不确定ngRepeat是否与此相关，因为我没有要迭代的对象列表。例如在命令式语言中，ngRepeat等于foreach，但我只需要for循环，我可以指定我需要的元素数量

更新3 我将所有行添加到数组tableRowsHTML。现在我有麻烦将它作为原始HTML呈现在视图中。这根本不起作用：

<table>
<tr> static stuff here </tr>
 <tr ng-repeat="el in tableRowsHTML track by $index">
                            {{el}}
</tr>
</table>

如何解决？

Answer 1

使用类似的东西

    <tr>
<td>
    <div class="form-group first-name" ng-repeat="name in firstNames track by $index">
        <label>First name</label>
        <input type="text" ng-class="{'input-valid': isValidField('FirstName', persons[$index].firstName)}" 
        name="firstName" class="form-control input-name" ng-model="persons[$index].firstName" 
        ng-focus="focused('inputFirstName', 0)" placeholder="-">
    </div>

</td>
<td>
    <div class="form-group last-name" ng-repeat="name in lastNames track by $index">
        <label>Last name</label>
        <input type="text" ng-class="{'input-valid': isValidField('LastName', persons[$index].lastName)}" 
        name="lastName" class="form-control input-name" ng-model="persons[$index].lastName" 
        ng-focus="focused('inputLastName', 0)" placeholder="-">
    </div>

</td>

这里首先是姓名，姓氏是姓名列表。

如何设置ngRepeat以生成外部存储的条目？

1 个答案: