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