时间戳

首页 > 解决方案 > ng-repeat 和选定的行

javascript - ng-repeat 和选定的行

问题描述

这是上一个问题的延续angularjs repeat table rows inside rows

我无法弄清楚是否有解决以下问题的方法。我希望能够在单击当前行时突出显示当前行（并为描述和“子”行独立执行，但在实际行数组中我没有单独使用它们 - 我只是使用 ng- 重复第一行两次-重复开始和 ng-重复结束方法）。

我目前有以下代码：

<tr ng-repeat-start="result in crud.model.lineItems track by $index"
                            ng-click="crud.selectedIndex=$index;"
                            ng-class="{selected: $index === crud.selectedIndex && result.rowNumber===1}">
                            <td ng-if="result.rowNumber===1">
                                <a href="{{'Items/DCI#/edit/item/'+ result.departmentId + '/' + result.categoryId + '/' + result.itemId}}" 
                                   target="_blank"
                                   title="@Labels.editItemInNewTab">{{result.itemId}}</a>
                            </td>
                            <td ng-if="result.rowNumber===1">{{result.item}}</td>

后面还有几个 td。

然后我有以下内容：

<tr ng-repeat-end ng-if="result.inventId!==0"
                            ng-click="crud.selectedIndex=$index;"
                            ng-class="{selected: $index === crud.selectedIndex && result.rowNumber > 1}">
                            <td></td>
                            <td></td>
                            <td>
                                {{result.inventoryDescrip}}
                            </td>

我正在尝试实现以下目标：如果单击顶部（描述）行，我想突出显示它。如果我单击接下来的每一行，我也想单独突出显示它们中的每一行（并使顶部描述行不突出显示）。

我似乎无法弄清楚是否有一些条件不能使前 2 行（描述 + 我的第一个矩阵）不一起突出显示。

使用我目前的方法，我可以突出显示顶部描述行和除第一行之外的所有行。我尝试了各种方法，但我没有看到一种方法可以按照我需要的方式突出显示它。

你看到我的问题和可能的解决方案了吗？

标签： javascripthtmlcssangularjs

解决方案

我让它工作了！

这是我的解决方案：

<tbody>
                        <tr ng-repeat-start="result in crud.model.lineItems track by $index"
                            ng-click="crud.selectedMatrixIndex=-1;crud.selectedIndex=$index;"
                            ng-class="{selected: $index === crud.selectedIndex}">

在 ng-repeat 的顶部和

 <tr ng-repeat-end ng-if="result.inventId!==0"
                            ng-click="crud.selectedMatrixIndex=$index;crud.selectedIndex = -1;"
                            ng-class="{selected: $index === crud.selectedMatrixIndex}">
                            <td></td>
                            <td></td>
                            <td>
                                {{result.inventoryDescrip}}
                            </td>

在底部。我在控制器中用 -1 初始化 MatrixIndex，用 0 初始化 selectedIndex。因此，我现在能够独立选择我的行（顶部描述行和“子”行）。

推荐阅读