I am trying to create a page with two columns of fixed height. The content in each column is generated using ng-repeat directive.
Is it possible to implement scrolling within each column to a specific id using AngularJS?
Code
<div>
Scroll to a position
Column #: <input style="width: 20px;">
Item #: <input style="width: 20px;">
</div>
<div class='column'>Column one
<div id="col-1-{{$index}}" class='item' ng-repeat='item in itemsOne track by $index'>
{{$index}} ..... {{item}}
</div>
</div>
<div class='column'>Column two
<div id="col-2-{{$index}}" class='item' ng-repeat='item in itemsTwo track by $index'>
{{$index}} ..... {{item}}
</div>
</div>
JS:
app.controller( 'myCtrl', [ '$scope', function ( $scope ){
$scope.value = 'test';
$scope.itemsOne = [];
$scope.itemsTwo = [];
for(var i=0; i<10; i++){
$scope.itemsOne.push(generateText());
$scope.itemsTwo.push(generateText());
}
function generateText() {
var text = "";
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < Math.random() * 200; i++ ){
for( var i=0; i < Math.random() * characters.length; i++ )
text += characters.charAt(Math.floor(Math.random() * characters.length));
text += " ";
}
return text;
}
$scope.scrollMeTo = function(column, row){
// Implementation pending
};
}] );