Question

我有一个显示可选信息的表格。有时可以选择子行。

如果父行没有子节点，我希望它们是可选择的，否则只能选择子行。这是一种只选择一种类型的表。

现在可以选择父行，但是当选择具有子行的行时，将选择所有内容。我正在使用嵌套的ng-repeats，因此这很复杂。

这是一个掠夺者。

http://plnkr.co/edit/baCIxeJB5JeVAJU8O7Hy?p=preview

select不在plunker中，但它在我的机器上......我正在运行Angular 1.4.7和ui_bootstrap 1.1.2。但是我觉得看到发生的事情已经足够了。

这是标记：

<div ng-controller="DemoCtrl">
    <table class="table">
        <thead>
        <tr>
            <th>S</th>
            <th>R</th>
            <th>Se</th>
            <th>D</th>
            <th>Ser</th>
            <th>L</th>
        </tr>
        </thead>

        <tbody ng-repeat="x in pro" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
        <tr >
            <td><b>{{x.a}}</b></td>
            <td>{{x.b}}</td>
            <td><u>{{x.c}}</u></td>
            <td>{{x.d}}</td>
            <td>{{x.e}}</td>
            <td>{{x.f}}</td>

            <tr ng-repeat = "details in x.jobs">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{details.name}}</td>
                        <td>{{details.jobs}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是控制器

$scope.setClickedRow = function(index){
  $scope.selectedRow = ($scope.selectedRow == index) ? null : index;
};

    $scope.pro = [
      {
        a : "G",
        b : "123",
        c : "S1",
        d : "D6",
        e : "O1",
        f : "B",
        jobs : [
          {
            "name": "Wakeup",

          },
          {
            "name": "work 9-5",

          }
        ]
      },
         {
        a : "R",
        b : "456",
        c : "S2",
        d : "D5",
        e : "O2",
        f : "B",
        jobs : [
        ]
      },
         {
        a : "G",
        b : "789",
        c : "S3",
        d : "D4",
        e : "O3",
        f : "P",
        jobs : [
          {
            "name": "Sleep",

          },
          {
            "name": "get ready for bed",

          }
        ]
         },
    ];
}

Answer 1

<强> TBODY

<tbody>
  <tr ng-repeat-start="(pIndex, x) in pro" ng-class="{'selected': parentSelected[$index]}" ng-click="setParentClickedRow(x, $index)">
    <td>
      <b>{{x.a}}</b>
    </td>
    <td>{{x.b}}</td>
    <td>
      <u>{{x.c}}</u>
    </td>
    <td>{{x.d}}</td>
    <td>{{x.e}}</td>
    <td>{{x.f}}</td>
  </tr>
  <tr ng-repeat-end ng-repeat="details in x.jobs" ng-class="{'selected': childSelected[pIndex][$index]}" ng-click="setChildClickedRow(pIndex, $index)">
    <td></td>
    <td></td>
        <td></td>
        <td></td>
        <td>{{details.name}}</td>
        <td>{{details.jobs}}</td>
    </tr>
</tbody>

控制器代码段

$scope.parentSelected = [];
$scope.childSelected = [];

$scope.setParentClickedRow = function(x, index) {
  if(!x.jobs || x.jobs.length === 0) {
    $scope.parentSelected[index] = !$scope.parentSelected[index];
  } 
};

$scope.setChildClickedRow = function(parentIndex, index) {
  $scope.childSelected[parentIndex] = $scope.childSelected[parentIndex] || [];
  $scope.childSelected[parentIndex][index] = !$scope.childSelected[parentIndex][index];
}

以前，您的tbody元素已应用于课程selected。那是一个错误。此外，没有尝试检查/区分父行和子行。

我将ng-repeat替换为ng-repeat-start并开始迭代tr。它与逻辑无关，只是我不想用tbody进行迭代并为每次迭代生成tbody。

逻辑在setParentClickedRow和setChildClickedRow函数中。在setParentClickedRow函数中，检查该父对象是否具有创建子行的子obj（长度> 0）。如果没有，我们可以通过更改parentSelected数组来选择它。在setChildClickedRow函数中，我们只需更改childSelected（二维数组）以使子行可选。

请参阅此Plunker。

选择父行，除非Angular Table中存在子行

1 个答案: