Separate count click in AngularJS

Question

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>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation data-ng-model="number">
        </events-evaluation>
      </div>
    </div>
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation data-ng-model="number">
        </events-evaluation>
      </div>
    </div>
  </form>
</div>

I would like code like/dislike system, but I ca't handle with all problems. First: How make $this in Angular something like in jQuery, because look, if I click plus in first in second plus will be clicked too. I would like separate clicks two divs.

Second: How make that will possible only one click plus or minus (range click will be 1)

assign different model to both like data-ng-model="number" and data-ng-model="number_sec". — Jenny
– Jenny, Commented Feb 22, 2017 at 9:28
Yes, I know it, but if I will have 100 the same divs? I have to create 100 different ng-model? — Mat.Now
– Mat.Now, Commented Feb 22, 2017 at 9:30
If you use it in an ng-repeat, you can do something like <div ng-repeat="item in items"><events-evaluation ng-model="item.number"> — devqon
– devqon, Commented Feb 22, 2017 at 9:33
Yes because you don't have an ng-repeat. I assumed that you don't create 100 same divs by hand, but use a ng-repeat for that — devqon
– devqon, Commented Feb 22, 2017 at 9:45

Manikandan Velayutham · Accepted Answer · 2017-02-22 11:13:35Z

Your both ng-model refering same $scope. Try to give different $scope in ng-model. like below.

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.quetions = [      
      {ques:"Angular 2 is same as react js?", qno : 1},
      {ques:"What is Angular 2?", qno : 2}
    ]

$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>
<div class="row">
<h2>See here:</h2>
<div ng-repeat="q in quetions">
<events-evaluation class="col-md-6" data-ng-model="q.qno">
</events-evaluation>
<p class="col-md-6">{{q.ques}}</p><br>
</div>
</div>


<h2>See yours:</h2>
<h3>Like or dislike</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>
<h3>Like or dislike</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>


</form>
</div>

Pankaj · Accepted Answer · 2017-02-22 09:48:08Z

The values should be controlled by external controller, not the directive's.

I have added a button 'Log Values' to log the changes in the external controller values.

var app = angular.module('app', []);
app.controller('MyController', function($scope) {
  $scope.number1 = 1;
  $scope.number2 = 0;
  $scope.log = function(){
    console.log($scope.number1, $scope.number2);
  }
});
app.directive("eventsEvaluation", function() {
  return {
    restrict: "E",
    template: "<div>" +
      "<span class='span' type='number' data-ng-bind='value'></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,
    scope: {
      value: '=',
    },
    replace: true,
    link: function($scope, elem, attr, ctrl) {

      $scope.increase = function(val) {
        $scope.value++;
      };
      $scope.reduce = function(val) {
        $scope.value--;
      };

    }
  }
});

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 ng-controller="MyController">
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation value="number1">
        </events-evaluation>
      </div>
    </div>
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation value="number2">
        </events-evaluation>
      </div>
    </div>
    <button type="button" ng-click="log()">Log Values</button>
  </form>
</div>

Collectives™ on Stack Overflow

Separate count click in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related