var app = angular.module('app', []);
app.directive("eventsEvaluation", function() {
return {
restrict: "E",
template: "<div>" +
"<span class='span' type='number' data-ng-bind='number'></span>" +
" <a class='btn btn-default' href='#' data-ng-click='reduce()'><span class='glyphicon glyphicon-minus'></span></a> " +
" <a 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 = 0;
$scope.increase = function() {
$scope.number++;
};
$scope.reduce = function() {
$scope.number--;
};
},
}
});span.span {
width: 40px;
height: 40px;
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
margin-left: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" data-ng-app="app">
<form>
<h3>Choose your preference</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>
<h3>Choose your preference</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>
</form>
</div>I am seeking a code for a like/dislike system, but I am facing some difficulties.
First: How can I make $this in Angular behave similarly to jQuery, because currently, if I click the plus button in the first section, the plus button in the second section is also clicked. I want the clicks to be separate for each section.
Second: How can I ensure that only one click is allowed for plus or minus (i.e., the click range should be limited to 1)?