计算在angularjs中单击按钮的次数

时间:2021-02-08 23:56:00

I have 5 buttons and I want when I click each of them it will count. For example I clicked the button 1, the counter should increment 1, and when I clicked the button 2 the counter should increment 1 again. So the total of counter to be displayed is 2. Below is the code I've done so far, but it's not working as I expected. What should I have to do ?

我有5个按钮,当我点击它们时我想要它会计数。例如,我单击按钮1,计数器应递增1,当我单击按钮2时,计数器应再次递增1。所以要显示的计数器总数是2.下面是我到目前为止所做的代码,但它没有按照我的预期工作。我该怎么办?

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  
  $scope.count = function(inc){
    
    $scope.counter += inc;
  };
  
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
 
  <button id = '1' ng-click = "count(1)" >1 </button>
  <button id = '2' ng-click = "count(1)" >2 </button>
  <button id = '3' ng-click = "count(1)" >3 </button>
  <button id = '4' ng-click = "count(1)" >4 </button>
  <button id = '5' ng-click = "count(1)" >5 </button>
  <label> Total Count : {{counter}} </label>
  </body>

3 个解决方案

#1


4  

Just declare the counter in the controller:

只需在控制器中声明计数器:

var app = angular.module("myApp", []);
app.controller('check', function ($scope) {
    $scope.counter = 0;
    $scope.count = function (inc) {
        $scope.counter += inc;
    };
});

See this fiddle: http://jsfiddle.net/mnotp1pc/

看到这个小提琴:http://jsfiddle.net/mnotp1pc/

#2


1  

You must initialize $scope.counter to zero

您必须将$ scope.counter初始化为零

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.counter= 0;
  $scope.count = function(inc){
    
    $scope.counter += inc;
  };
  
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
 
  <button id = '1' ng-click = "count(1)" >1 </button>
  <button id = '2' ng-click = "count(1)" >2 </button>
  <button id = '3' ng-click = "count(1)" >3 </button>
  <button id = '4' ng-click = "count(1)" >4 </button>
  <button id = '5' ng-click = "count(1)" >5 </button>
  <label> Total Count : {{counter}} </label>
  </body>

#3


1  

you have to initialise the counter variable as 0, $scope.counter = 0

你必须将计数器变量初始化为0,$ scope.counter = 0

#1


4  

Just declare the counter in the controller:

只需在控制器中声明计数器:

var app = angular.module("myApp", []);
app.controller('check', function ($scope) {
    $scope.counter = 0;
    $scope.count = function (inc) {
        $scope.counter += inc;
    };
});

See this fiddle: http://jsfiddle.net/mnotp1pc/

看到这个小提琴:http://jsfiddle.net/mnotp1pc/

#2


1  

You must initialize $scope.counter to zero

您必须将$ scope.counter初始化为零

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.counter= 0;
  $scope.count = function(inc){
    
    $scope.counter += inc;
  };
  
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
 
  <button id = '1' ng-click = "count(1)" >1 </button>
  <button id = '2' ng-click = "count(1)" >2 </button>
  <button id = '3' ng-click = "count(1)" >3 </button>
  <button id = '4' ng-click = "count(1)" >4 </button>
  <button id = '5' ng-click = "count(1)" >5 </button>
  <label> Total Count : {{counter}} </label>
  </body>

#3


1  

you have to initialise the counter variable as 0, $scope.counter = 0

你必须将计数器变量初始化为0,$ scope.counter = 0