выделить строку таблицы с помощью angularjs

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

Это вы что искали? Мне приходилось угадывать некоторые данные, а также поведение выбора.

Не стесняйтесь спрашивать подробности, если это решение удовлетворило вас.

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']}, 
 
    
 
    ] 
 
}

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

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

Answer 2

я пытался следующим образом, но это выдвигает на первый план все строки

Это потому что вы устанавливаете свойство общей видимости, которое разделяется всеми строками. Вы должны установить 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}' 

Answer 3

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

Рабочая Fiddle Ссылка

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

Это мой заказ простое решение.