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

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

angularjs

Angularjs 单击行上的按钮不会选择所选的行,angularjs,Angularjs,我有一个测试模型表，其中我使用selectTest功能高亮显示选定的测试现在单击tr标记（行）上的+/expander按钮时，包裹expander按钮的tr标记未设置为选中我怎样才能做到这一点-不使用扩展器按钮的ng点击功能- <tr ng-repeat-start="person in tests" ng-click='selectTest($index)' ng-class='{selected: $index==selectedRow}'> <

我有一个测试模型表，其中我使用selectTest功能高亮显示选定的测试

现在单击tr标记（行）上的+/expander按钮时，包裹expander按钮的tr标记未设置为选中

我怎样才能做到这一点-不使用扩展器按钮的ng点击功能-

    <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;
        };


-
+
{{person.code}
{{person.date}
{{person.number}
{{person.type}
//为简洁起见，删除了表格的其余部分
$scope.selectTest=函数（行）{
$scope.selectedRow=行；
};

不建议使用索引突出显示选中的行，因为如果以后对数组进行排序或对源数组进行一些动态更改，该索引可能会更改。相反，你可以这样做：

<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);
}

您有

ng repeat start

，但没有

ng repeat end

除此之外，我不确定你还可能有什么错误，或者你使用的是哪个版本的angular

我已使用您的代码在此处创建了一个plnkr：

CSS

.selected{
  color:Yellow;
}

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;
  };
});

.selected{
  color:Yellow;
}

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>


-
+
{{person.code}
{{person.date}
{{person.number}
{{person.type}
扩大

您在哪里将

selectedRow

设置为所选行？（我们需要这些信息）在控制器中查看更新的代码。尝试将控制器主体更改为

$parent.selectedRow=row@OrelEraki我到底应该更改什么？当我刚刚替换$scope.selectedRow=row时；你的代码毫无意义。这与我最初的问题无关。你可以用我上面的例子来确切地说明你所说的你想做的事情。是的，我有一个ng重复开始和结束。因此，您的示例有效。没有-start/-end，我的代码就像你的一样。但是当我点击行本身和按钮时，我需要扩展+行选择。我更新了我的代码。