javascript - 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>

我想要喜欢/不喜欢系统的代码，但我无法处理所有问题。第一:如何在 Angular 中制作类似于 jQuery 的 $this ，因为看，如果我在第一个中单击加号，第二个加号也会被单击。我想单独点击两个 div。

第二:如何才能只点击一次加或减(范围点击将为1)

Answer 1

您的两个 ng-model 引用相同的 $scope。尝试在 ng-model 中给出不同的 $scope。像下面这样。

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>