Question

我想知道是否有一种内置的Angular方法将表的2行绑定到单个JSON对象，就像通常使用单行一样。例如，我可以将JS数组绑定到DOM，如下所示：

       <tbody id="tbActivities">
            <tr ng-repeat="activity in activities" ng-click="removeItem(activity)">
                <td>{{ activity.Description }}</td>
                <td>{{ activity.Count }}</td>
                <td>{{ activity.CustomerName }}</td>
                <td>{{ activity.Date }}</td>
            </tr>
        </tbody>

这将为我拥有的每个<tr>创建一个activity。但是，我希望能够在显示当前项目的更大详细信息的每个当前行之后有另一个<tr>。那么DOM会看起来更像这样

       <tbody id="tbActivities">
            <tr ng-repeat="activity in activities" ng-click="removeItem(activity)">
                <td>{{ activity.Description }}</td>
                <td>{{ activity.Count }}</td>
                <td>{{ activity.CustomerName }}</td>
                <td>{{ activity.Date }}</td>
            </tr>
                <tr class="ActivityDetail">
                   <td></td>
                   <td colspan="3">
                         {{ activity.Detail }}
                   </td>
                </tr>
        </tbody>

活动的Detail属性实际上是HTML，仅在用户单击关联行时显示。实现这一目标的最佳方法是什么？我是否会将<tr>包裹在另一个标签中并让该标签使用ng-repeat？

Answer 1

只需使用ng-repeat-start。

    <tbody id="tbActivities">
        <tr ng-repeat-start="activity in activities" ng-click="removeItem(activity)">
            <td>{{ activity.Description }}</td>
            <td>{{ activity.Count }}</td>
            <td>{{ activity.CustomerName }}</td>
            <td>{{ activity.Date }}</td>
        </tr>
        <tr ng-repeat-end class="ActivityDetail">
           <td></td>
           <td colspan="3">
                 {{ activity.Detail }}
           </td>
        </tr>
    </tbody>

将ng-repeat元素组合在一起

1 个答案: