Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/ngClass2.html

Created November 18, 2014 13:44
Show Gist options
  • Save kalbarczyk/d4831d4395758bab3832 to your computer and use it in GitHub Desktop.
Save kalbarczyk/d4831d4395758bab3832 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - dyrektywa ngClass - przykład 2 z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
ngClass2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title>Mountains</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
<table class="table table-condensed">
<thead>
<tr>
<th>Mountain</th>
<th>Metres</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="m in mountainsList | orderBy:sorting"
data-ng-class="{warning: m.metres<8500, danger: m.metres>8600}">
<td>{{m.mountain}}</td>
<td>{{m.metres}}</td>
</tr>
</tbody>
</table>
<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.0-rc.1/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('defaultCtrl', function ($scope) {
$scope.sorting = '-metres';
$scope.mountainsList = [
{
mountain: "Mount Everest",
metres: 8850
},
{
mountain: "K2",
metres: 8611
},
{
mountain: "Kangczendzonga",
metres: 8598
},
{
mountain: "Lhotse",
metres: 8501
},
{
mountain: "Makalu",
metres: 8463
},
{
mountain: "Cho Oyu",
metres: 8201
}];
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment