我有一张固定宽度的桌子;如果表中的数据超出定义的宽度,则用户可以左右滚动,因为我有一个CSS元素overflow: auto;
。
我要做的是在桌子两侧引入按钮,以便用户可以点击它们,桌子将向左或向右滚动。
我使用Angular服务实现了这一点,但是在ng-click上,该表只向左或向右滚动一次。我有一种感觉,这是因为我使用的是服务,而不是指令?
这是我的傻瓜:http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview
点击上面的按钮,你会看到$ error,我不会在我的项目中得到这个,因为我也在使用jQuery。
HTML:
<body ng-controller="MyController">
<div >
<div class="scrollable my-table" ng-init="sectionIndex = $index; sectionID='my-table'" id="my-table">
<table>
<tr>
<th></th>
<th>Jun</th>
<th>May</th>
<th>Apr</th>
<th>Mar</th>
<th>Feb</th>
<th>Jan</th>
<th>Dec</th>
<th>Nov</th>
<th>Oct</th>
<th>Sep</th>
<th>Aug</th>
<th>Jul</th>
</tr>
<tbody>
<tr>
<th>Preditcion</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<th>Recored</th>
<td>10</td>
<td>09</td>
<td>12</td>
<td>13</td>
<td>04</td>
<td>21</td>
<td>14</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>17</td>
<td>15</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll-btns-area">
<div class="scroll-btns">
<div class="scroll-left" ng-click="scrollLeft(sectionIndex, sectionID)">
<img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-left.jpg" width="25px">
</div>
<div class="scroll-right" ng-click="scrollRight(sectionIndex, sectionID)">
<img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-right.jpg" width="25px">
</div>
</div>
</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('MyController', function($scope, scrollLeftRightService) {
$scope.scrollLeft = scrollLeftRightService.moveLeft;
$scope.scrollRight = scrollLeftRightService.moveRight;
});
app.factory('scrollLeftRightService', function() {
return {
moveLeft: function(sectionIndex, sectionID) {
console.log("sectionIndex = " + sectionIndex);
console.log("sectionID = " + sectionID);
var scrollViewport_width = $(window).width();
var pixelsToMove = 0;
if (typeof sectionIndex != 'undefined') {
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);
pixelsToMove = pixelsToMove - 100;
if (pixelsToMove <= 0) {
pixelsToMove = 0;
} else {
pixelsToMove = pixelsToMove;
}
} else {
$('#' + sectionID).scrollLeft(pixelsToMove - 100);
pixelsToMove = pixelsToMove - 100;
if (pixelsToMove <= 0) {
pixelsToMove = 0;
} else {
pixelsToMove = pixelsToMove;
}
}
},
moveRight: function(sectionIndex, sectionID) {
console.log("sectionIndex = " + sectionIndex);
console.log("sectionID = " + sectionID);
var scrollViewport_width = $(window).width();
var pixelsToMove = 0;
if (typeof sectionIndex != 'undefined') {
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove + 100);
pixelsToMove = pixelsToMove + 100;
if (pixelsToMove >= scrollViewport_width) {
pixelsToMove = scrollViewport_width;
} else {
pixelsToMove = pixelsToMove;
}
} else {
$('#' + sectionID).scrollLeft(pixelsToMove + 100);
pixelsToMove = pixelsToMove + 100;
if (pixelsToMove >= scrollViewport_width) {
pixelsToMove = scrollViewport_width;
} else {
pixelsToMove = pixelsToMove;
}
}
}
};
});
我将如何删除服务和使用指令?
答案 0 :(得分:1)
问题在于:
var pixelsToMove = 0;
...
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);
每当您将pixelsToMove
设置为0时,它只会滚动scrollLeft to -100
并且您不会将其递增任何数字
干杯