ng-repeate 테이블이 있습니다. 선택한 각 행에 대해 toggleClass가 필요합니다. 내 코드는 다음과 같습니다.
<tr ng-repeat="expenses in Expensereports" ng-mouseenter='showpencil=true' ng-mouseleave='showpencil=false' ng-class="{'selectedrow':selectDelete}">
<td class="text-center">
<input type="checkbox" ng-model='expenses.isDelete' class='deletebox' ng-change='selectedDeleteRow(expenses.isDelete)'/>
</td>
<td class="text-center">{{expenses.date | parseDateFormat | date}}</td>
<td class="text-center">{{expenses.type}}</td>
</tr>
내 JS 코드 :
$scope.selectedDeleteRow = function(selected){
if(selected==true){
$scope.selectDelete=true;
}else{
$scope.selectDelete=false;
}
}
내가 원하는 것은 사용자가 확인란을 선택하면 전체 행을 강조 표시해야한다는 것입니다. 그러나 선택되지 않은 다른 행은 그대로 두십시오. 단순히 사용자 에게이 행이 선택되었음을 알리는 것입니다. 해당 행을 선택 취소하면 클래스가 사라집니다.
ng-class="{'selectedrow': expenses.isDelete}" 작동해야합니다.
var app = angular.module('myApp', []);
app.controller('test', function($scope) {
$scope.Expensereports = [
{'test': 'Row 1'},
{'test': 'Row 2'},
{'test': 'Row 3'}
];
});tr.selectedrow {
background-color: red;
}<div ng-app="myApp">
<table ng-controller="test">
<tr ng-repeat="expenses in Expensereports" ng-class="{'selectedrow': expenses.isDelete}">
<td>
<input type="checkbox" ng-model="expenses.isDelete" ng-change="selectedDeleteRow(expenses.isDelete)"/>
</td>
<td class="text-center">{{expenses.test}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다