<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="https://rawgithub.com/jamesflorentino/nanoScrollerJS/0.8.0/bin/javascripts/jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/jamesflorentino/nanoScrollerJS/0.8.0/bin/css/nanoscroller.css">
<script src="https://rawgithub.com/maxaon/angular-nanoscroller/v0.2.0/scrollable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<title>Demo of angular-nanoscroller</title>
<script src="app.js"></script>
</head>
<body ng-app="app">
<h1>Demonstration fof scroller</h1>
<div class="row">
<div class="col-md-6 col-sm-6" ng-controller="DemoController">
<div class="wrapper thumbnail">
<scrollable>
<p ng-repeat="item in items">This is item {{item}}</p>
</scrollable>
</div>
<div class="description">
<p>General usagage</p>
<a ng-click="addItem()" class="btn btn-primary"> Add item to list</a>
</div>
</div>
<div style="clear:right"></div>
<div class="col-md-6 col-sm-6" ng-controller="DemoController">
<div class="wrapper thumbnail">
<scrollable static>
<p ng-repeat="item in items">This is item {{item}}</p>
</scrollable>
</div>
<div class="description">
<p>Added static attribute. No updates when height is changed</p>
<a ng-click="addItem()" class="btn btn-primary"> Add item to list</a>
</div>
</div>
<div style="clear:right"></div>
<div class="col-md-6 col-sm-6" ng-controller="DemoController">
<div class="wrapper thumbnail">
<scrollable always-visible="true" watch-collection="items,items2">
<p ng-repeat="item in items">This is item {{item}}</p>
<p ng-repeat="item in items2">This is second items {{item}}</p>
</scrollable>
</div>
<div class="description">
<p>Watching two collections</p>
<a ng-click="addItem()" class="btn btn-primary"> Add item to list</a>
<a ng-click="addItem2()" class="btn btn-primary"> Add item to second list</a>
</div>
</div>
</div>
<h3>Nested scrollers</h3>
<div class="row" ng-controller="DemoController">
<div class="col-md-12"><a ng-click="addItem()" class="btn btn-block btn-primary">Add one item</a>
</div>
<div class="col-md-12" scrollable style="height:400px">
<p ng-repeat="i in items">This is outer wrap scroller {{i}}</p>
<div class="wrapper thumbnail" style="float:none">
<scrollable>
<p ng-repeat="item in items">This is inner item {{item}}</p>
</scrollable>
</div>
<p ng-repeat="i in items">This is outer wrap scroller {{i}}</p>
</div>
</div>
</body>
</html>
(function(angular, $, undefined) {
'use strict';
angular.module('app', ['sun.scrollable'])
.controller('DemoController', function($scope) {
var items = $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var items2 = $scope.items2 = [0, -1, -2, -3, -4];
$scope.addItem = function() {
items.push(items[items.length - 1] + 1);
};
$scope.addItem2 = function() {
items2.push(items2[items2.length - 1] - 1);
};
});
}(angular, jQuery));
/* Styles go here */
.example{
width:100%;
}
.wrapper{
height: 200px;
width:200px;
margin: 0;
border:1px black solid;
float:right;
}