Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/system-ocen.html

Created March 18, 2015 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalbarczyk/2aa0a5efe7ac05bdd0ac to your computer and use it in GitHub Desktop.
Save kalbarczyk/2aa0a5efe7ac05bdd0ac to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - system ocen
Raw
system-ocen.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title>AngularJS - system ocen</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body>
<div class="container">
<form>
<h3>Oceń wydarzenie</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation text="Lokalizacja" data-ng-model="number">
</events-evaluation>
</div>
<div class="col-md-4">
<events-evaluation text="Hotel" data-ng-model="number">
</events-evaluation>
</div>
<div class="col-md-4">
<events-evaluation text="Jedzenie" data-ng-model="number">
</events-evaluation>
</div>
</div>
</form>
</div>
<script src="https://code.angularjs.org/1.3.3/angular.js"></script>
<script>
(function () {
'use strict';
angular
.module('app', []);
})();
(function () {
'use strict';
angular
.module('app')
.directive('eventsEvaluation', eventsEvaluation);
function eventsEvaluation() {
return {
restrict: "E",
scope: {
text: "@",
},
template:
"<div>" +
" {{text}}: <input ng-disabled='true' type='number' data-ng-model='number' class='form-control' />" +
" <a ng-disabled='number<1' class='btn btn-default' href='#' data-ng-click='reduce()'><span class='glyphicon glyphicon-minus'></span></a> " +
" <a ng-disabled='number>9' class='btn btn-default' href='#' data-ng-click='increase()'><span class='glyphicon glyphicon-plus'></span></a> " +
"</div>",
replace: true,
transclude: false,
controller: function ($scope) {
$scope.number = 5;
$scope.increase = function () {
$scope.number++;
};
$scope.reduce = function () {
$scope.number--;
};
},
}
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment