除非 Angular 表中存在子行，否则选择父行

Question

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

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

Right now the parent rows are selectable, but when the row with the child rows is selected, everything is selected.我正在使用嵌套的 ng-repeats，所以这使事情变得复杂。

这里是一个笨蛋。

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

选择在 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>
  <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>

控制器 sn-p

$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(length > 0)。如果没有，我们通过更改parentSelected 数组使其可选择。在setChildClickedRow 函数中，我们只需更改childSelected（二维数组）以使子行可选择。

看到这个Plunker。