<!doctype html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
<script src="scroll/ng-scrollbar.min.js"></script>
<link rel="stylesheet" href="scroll/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 200px;
}
</style>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h1>ngScrollBar <small>example</small></h1>
</div>
Bar is shown: {{barShown}}
<div class="well" >
<div class="scrollme" ng-scrollbar is-bar-shown="barShown">
<table>
<tr ng-repeat="x in names">
<td>
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red">
</td>
<td>{{ x.postId }}</td>
<td>{{ x.id }}</td>
<td>{{ x.email }}</td>
<td>{{ x.body }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var myapp = angular.module('myapp', ['ngSanitize', 'ngScrollbar']);
myapp.controller('myctrl', function ($scope,$http) {
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
$http.get("http://jsonplaceholder.typicode.com/posts/1/comments")
.success(function (response) {$scope.names = response});
});
</script>
</body>
</html>
No comments:
Post a Comment