Question

如何使用angularjs突出显示表行。我尝试了以下方式，但它突出显示所有行。

我有以下方式的表格，

<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
  <tr data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions" data-ng-class='{selected: $index==selectedRow}'>
<td>xxxxxx</td>
<td>xxxxxx</td>

</tr>
</tbody>
</table>

控制器，

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

Answer 1

这是你在找什么？我不得不猜测一些模拟数据以及选择行为。

如果此解决方案适合您，请随时询问更多详细信息。

＆＃13;

function TestCtrl($scope){
  
  $scope.rowHighilited = function(group, row){
    $scope.selectedGroup=  group;
    $scope.selectedRow = row; 
  };
  
  $scope.transactionsGroups=[
    
    {transactions:['test1','test2','test3']},
    {transactions:['test1','test2']},
    {transactions:['test1','test2']},
    
  ]
}

＆＃13;

.selected{
  background:black;
  color:white;
}

/* The following just makes the tbody tags spaced up,
see http://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements for details */

table {
  border-collapse: collapse;
  width:100%;
  max-width:300px;
}

table tbody {
  border-top: 30px solid white;
}

td,th{width:50%; text-align:center;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestCtrl">

<pre ng-bind="{{transactionsgroups}}"></pre>

<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody 
       ng-repeat="transactionGroup in transactionsGroups"
       ng-init="groupIndex=$index"
       >
  <tr 
      ng-repeat="transaction in transactionGroup.transactions"
      ng-init="transactionIndex=$index"
      ng-click="rowHighilited(groupIndex, transactionIndex)"
      ng-class="groupIndex==selectedGroup && transactionIndex==selectedRow?'selected':''">
    <td>transaction:</td>
    <td>{{transaction}}</td>
  </tr>
</tbody>
  
</table>
  
</div>

＆＃13;

Answer 2

<div ng-app="myApp">
<div ng-controller="startCtrl">
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
  <tr ng-class="{active:$index==selectedRow}" data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions">
<td>{{txns.id}}</td>
<td>{{txns.trasactionName}}</td>


</tr>
</tbody>
</table>

</div>
</div>

您的控制器。

var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
    $scope.transactionsgroup=[ 
                              {id:1,
                               transactions:            
                                            [{id:1,trasactionName:"a"},
                                            {id:2,trasactionName:"b"},
                                            {id:3,trasactionName:"c"}
                                            ]}
                             ];

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

});

你的.css

.active{
    background:yellow;
    border:1px solid;
}

工作小提琴链接

http://jsfiddle.net/Lk4me2xp/1/

这是我的自定义简易解决方案。

Answer 3

我尝试了以下方式，但它突出显示所有行

这是因为您正在设置所有行共享的公共范围属性。您应该在单个单击行的范围内设置selectedRow。您可以在this内使用ngClick引用行子范围：

$scope.rowHighilited = function(row) {
    this.selectedRow = true; 

    // or if you also want to unselect on the second click 
    // this.selectedRow = !this.selectedRow; 
};

然后：

data-ng-class='{selected: txns.selectedRow}'

使用angularjs突出显示表行

3 个答案: