0
固定高さのdiv内にテーブルがあり、行のデータがコントローラから変更されたときに、行をスクロールして表示したいと考えています。私はいくつかの方法がStackOverflowの質問に固定サイズのdiv内でテーブル行に自動スクロールする方法は？
- automatically-scroll-table-when-the-selected-row-is-the-row-before-last-row
- how-do-i-auto-scroll-to-a-specific-table-row
を説明した。しかし、彼らは私のために動作しませんでした試してみました。私は以下のようなテーブルを持っています。
<div style="overflow: auto; max-height: 200px; margin-bottom: 20px;">
<div class="scroll-wrapper" style="width: 100%; margin-right: 20px;">
<table id="progressTable" class="table table-border widgetTable">
<tbody>
<tr ng-repeat="service in serviceList">
<td>{{service.name}}</td>
<td class="text-right" style="padding-right: 25px;">
<span ng-show="service.status == 1" class="specialIcon icon-tick-inside-circle" style="color: #7EC848"></span>
<span ng-show="service.status == 2" class="specialLargerIcon icon-cross-inside-circle" style="color: #D93A1B"></span>
<span ng-show="service.status == 3">Pending</span>
<span ng-show="service.status == 4"> </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
ステータスが変更されたときに、行をフォーカスに移動したいと考えています。 角度でこれを達成するには？
私の問題を説明するコードスニペットは以下のとおりです。ステータス変更ボタンをクリックすると、divを2行目にスクロールします。
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.selectedIndex = 0;
$scope.serviceList = [{
name: 'One',
status: 3
}, {
name: 'Two',
status: 3
}, {
name: 'Three',
status: 3
}];
$scope.focusRow = function() {
$scope.selectedIndex = $scope.selectedIndex === $scope.serviceList.length - 1 ? $scope.serviceList.length - 1 : $scope.selectedIndex + 1;
var w = $(window);
var row = $('table').find('tr').eq($scope.selectedIndex);
if (row.length) {
w.scrollTop(row.offset().top - (w.height()/2));
}
}
$scope.change = function() {
$scope.selectedIndex = 1;
$scope.serviceList[1].status = 1;
$scope.focusRow();
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app' ng-controller='ctrl'>
<div style="overflow: auto; max-height: 50px; margin-bottom: 20px;">
<div class="scroll-wrapper" style="width: 100%; margin-right: 20px;">
<table id="progressTable" class="table table-border widgetTable">
<tbody>
<tr ng-repeat="service in serviceList">
<td>{{service.name}}</td>
<td class="text-right" style="padding-right: 25px;">
<span ng-show="service.status == 1">1</span>
<span ng-show="service.status == 2">2</span>
<span ng-show="service.status == 3">Pending</span>
<span ng-show="service.status == 4"> </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button class='btn btn-sm' ng-click='change()'>Change status</button>
</div>
</body>
snipeetまたはjsfiddlleを作成しますか？ –
@artgb私が持っている問題を示すコードスニペットを追加しました –