2
私はちょうどAngular JSを起動していて、内容のボックスに入力されるリストに要素を追加するときにスクロールバーを表示しようとしています。 ここからng-scrollbarをインストールしました。 https://github.com/asafdav/ng-scrollbarng-repeatとng-scrollbarが一緒に機能しない
HTML：
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
はJavaScript：
(function() {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
それは完全に理にかなっていない可能性がありますので、それは私のコードの一部です。しかし、それが動作する方法は、addImageButtonを押すと、Web上に行を追加する行が追加されるということです。逆に、removeImageButtonはWeb上にすぐに表示される行を削除します。一度100pxの高さに達するとスクロールバーが表示されます。私はng-scrollbar is not working with ng-repeat の最後の答えもチェックしましたが、うまくいきませんでした。私が詳細な説明に助けを得ることができれば素晴らしいだろう。 :)ありがとう！
イベントで渡されたドキュメントの再構築中。追加しようとしました： $ scope。$ broadcast（ 'rebuild：me'）;行の追加と削除の最後に – Silvinus
@シルヴィナスはい私は持っている！ :) –