Question

我有一个测试模型表，我使用selectTest函数高亮显示所选测试。

当我现在点击tr-tag（行）上的+ /扩展器按钮时，包裹扩展器按钮的tr-tag未设置为选中状态。

我怎样才能实现这一目标？ - 没有使用扩展按钮的ng-click功能 -

    <tr ng-repeat-start="person in tests" ng-click='selectTest($index)' ng-class='{selected: $index==selectedRow}'>
        <td>
            <button type="button" class="btn btn-default" ng-if="person.expanded" ng-click="person.expanded = false">-</button>
            <button type="button" class="btn btn-default" ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
        </td>
        <td>{{person.code}}</td>
        <td>{{person.date}}</td>
        <td>{{person.number}}</td>
        <td>{{person.type}}</td>
    </tr>
<tr ng-if="person.expanded" ng-repeat-end="">
// removed for brevity the rest of the table

  $scope.selectTest = function (row) {
            $scope.selectedRow = row;
        };

Answer 1

建议不要使用索引突出显示所选行，因为如果稍后对数组进行排序或对源数组进行一些动态更改，它可能会更改。而是做这样的事情：

<tr ng-repeat="person in persons " ng-click='selectPerson(person)' ng-class='{selected: (selectedPersons.indexOf(person.id) > -1)}'>
...
</tr>

$scope.selectedPersons = [];
$scope.selectPerson = function(person){
    $scope.selectedPersons.push(person.id);
}

如果您没有人员ID，请使用任何唯一的人员标识符

如果您想要更短版本的类控制器，请执行以下操作：

$scope.isSelected = function(person){
    return $scope.selectedPersons.indexOf(person.id) > -1;
}

ng-class='{selected: isSelected(person)}'

Answer 2

您有ng-repeat-start但没有ng-repeat-end。

除此之外，我不确定你还有什么错误或者你可能使用的角度版本。

我已经在这里创建了一个包含您的代码的plnkr：http://plnkr.co/edit/GtlhULgfaldqdKRUuz8B?p=preview

<强> CSS

.selected{
  color:Yellow;
}

<强> JS

angular.module('myApp',[]).controller('TodoCtrl', 
function ($scope) {
  $scope.tests = [];
  $scope.tests.push({
    code: 1,
    date: '1/1/1',
    number: 1,
    type: 'type 1',
    expanded:false
  });
  $scope.tests.push({
    code: 2,
    date: '2/2/2',
    number: 2,
    type: 'type 2',
    expanded:false
  });

  $scope.selectTest = function(row) {

    $scope.selectedRow = row;
  };
});

<强> HTML

<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="TodoCtrl">
      <table>
        <tbody>
          <tr ng-repeat-start="person in tests" ng-click="selectTest($index)" ng-class="{selected: $index==selectedRow}">
            <td>
              <button type="button" class="btn btn-default" ng-if="person.expanded" ng-click="person.expanded = false">-</button>
              <button type="button" class="btn btn-default" ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
            </td>
            <td>{{person.code}}</td>
            <td>{{person.date}}</td>
            <td>{{person.number}}</td>
            <td>{{person.type}}</td>
          </tr>
       <tr ng-if="person.expanded" ng-repeat-end="" >
        <td colspan=5>EXPANDED</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

单击行上的按钮不会选择所选行

2 个答案: