Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/smart-table.html

Created February 6, 2015 12:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kalbarczyk/ba3af7c7f191932480cd to your computer and use it in GitHub Desktop.
Save kalbarczyk/ba3af7c7f191932480cd to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - Smart Table & Bootstrap UI example
Raw
smart-table.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>AngularJS - Smart Table & Bootstrap UI example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li data-ng-class="getClass('/home')"><a href="#/home">Strona główna</a></li>
<li data-ng-class="getClass('/mountain')"><a href="#/mountain">Góry</a></li>
<li data-ng-class="getClass('/smart_table')"><a href="#/smart_table">Góry (Smart table)</a></li>
<li data-ng-class="getClass('/carousel')"><a href="#/carousel">Carousel</a></li>
</ul>
</div>
</div>
</nav>
<div data-ng-view=""></div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="http://cdn.deblan.org/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>
<script src="http://lorenzofox3.github.io/smart-table-website/bower_components/angular-smart-table/dist/smart-table.debug.js"></script>
<script>
var app = angular.module("app", ['ngRoute', 'ui.bootstrap', 'smart-table']);
app.config(function ($routeProvider) {
$routeProvider
.when("/home", { templateUrl: "home.html" })
.when("/mountain", { templateUrl: "mountain.html", controller: "ListCtrl" })
.when("/smart_table", { templateUrl: "smart_table.html", controller: "ListCtrl" })
.when("/carousel", { templateUrl: "carousel.html" })
.when("/mountain/:id", { templateUrl: "details.html", controller: "DetailsCtrl" })
.otherwise({ redirectTo: "/home" });
});
app.controller("defaultCtrl", function ($scope, $location, mountainsList) {
$scope.getClass = function (path) {
if ($location.path().substr(0, path.length) == path) {
return "active"
} else {
return ""
}
}
});
app.controller("ListCtrl", function ($scope, mountainsList) {
$scope.mountains = mountainsList.getAll();
$scope.displayedData = [].concat($scope.mountains);
});
app.controller("DetailsCtrl", function ($scope, $routeParams, mountainsList, $location) {
$scope.mountain = mountainsList.getById($routeParams.id);
$scope.delete = function (id) {
mountainsList.deleteById(id);
$location.path('/mountain')
};
});
app.controller('CarouselCtrl', function ($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function () {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
console.log($scope);
});
app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
app.factory("mountainsList", function () {
var mountains = [
{ id: "1", mountain: "Mount Everest", metres: 8850, country: 'Nepal-China' },
{ id: "2", mountain: "K2", metres: 8611, country: 'Pakistan-China' },
{ id: "3", mountain: "Kangczendzonga", metres: 8598, country: 'Nepal-India' },
{ id: "4", mountain: "Lhotse", metres: 8501, country: 'Nepal-China' },
{ id: "5", mountain: "Makalu", metres: 8463, country: 'Nepal-China' },
{ id: "6", mountain: "Cho Oyu", metres: 8201, country: 'Nepal-China' },
{ id: "7", mountain: 'Dhaulagiri', metres: 8167, country: 'Nepal' },
{ id: "8", mountain: 'Manaslu', metres: 8163, country: 'Nepal' },
{ id: "9", mountain: 'Nanga Parbat', metres: 8125, country: 'Pakistan' },
{ id: "10", mountain: 'Annapurna', metres: 8091, country: 'Nepal' },
{ id: "11", mountain: 'Shishapangma', metres: 8012, country: 'China' }
];
return {
getAll: function () {
return mountains;
},
getById: function (id) {
var result = null;
angular.forEach(mountains, function (m) {
if (m.id == id) result = m;
});
return result;
},
deleteById: function (id) {
angular.forEach(mountains, function (m, i) {
if (id == m.id) {
mountains.splice(i, 1);
}
});
}
};
});
</script>
<script type="text/ng-template" id="home.html">
<h1>Jesteś na stronie głównej.</h1>
</script>
<script type="text/ng-template" id="mountain.html">
<div class="panel panel-default">
<div class="panel-body">
<h3>Lista</h3>
<p data-ng-repeat="mountain in mountains track by $index">
{{$index+1}}. <a href="#/mountain/{{mountain.id}}">
{{mountain.mountain}}
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</p>
</div>
</div>
</script>
<script type="text/ng-template" id="smart_table.html">
<div class="panel panel-default">
<div class="panel-body">
<h3>Smart Table</h3>
<table st-table="displayedData" st-safe-src="mountains" class="table table-striped">
<thead>
<tr>
<th st-sort="id" st-skip-natural="true">ID</th>
<th st-sort="mountain">Mountain</th>
<th st-sort="metres">Metres</th>
<th st-sort="country">Country</th>
<th>Info</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="szukaj ..." type="text" /></th>
</tr>
</thead>
<tbody>
<tr st-select-row="mountain" st-select-mode="multiple" ng-repeat="mountain in displayedData">
<td>{{mountain.id}}</td>
<td>{{mountain.mountain}}</td>
<td>{{mountain.metres}}</td>
<td>{{mountain.country}}</td>
<td>
<a href="#/mountain/{{mountain.id}}">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<script type="text/ng-template" id="carousel.html">
<div class="panel panel-default">
<div class="panel-body">
<h3>Carousel</h3>
<div ng-controller="CarouselCtrl">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="details.html">
<div class="panel panel-default">
<div class="panel-body">
<h3>Szczegóły</h3>
<div class="list-group">
<a href="#" class="list-group-item active">
{{mountain.mountain}}
</a>
<a href="#" class="list-group-item">Wysokość: <b>{{mountain.metres}}</b></a>
<a href="#" class="list-group-item">Państwo: <b>{{mountain.country}}</b></a>
</div>
<a href="#/mountain" class="btn btn-default">Powrót do listy</a>
<a href="" ng-click="delete(mountain.id)" class="btn btn-danger">Usuń {{mountain.mountain}}</a>
</div>
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment