AngularJS中每个列表项的按钮点击次数

我有一个列表，我想单独获取每个项目的按钮点击次数。我已经创建了一个示例example，但增加了所有项目。请帮忙。一件重要的事情是，JSON没有“计数”键。你可以通过修改阵列中的对象数组做AngularJS中每个列表项的按钮点击次数

var myApp = angular.module('myApp',[]); 

var jsonInfo = {"count":["one", "two", "three", "four"]} 

function MyCtrl($scope) { 
    $scope.data =jsonInfo; 

    $scope.counter = 0; 
    $scope.count = function (inc) { 
    $scope.counter += inc; 
    }; 
}

来源

2017-03-27 Vimal

一种方式

var jsonInfo = {"count":[{"name":"one",count:0} ,{"name":"two",count:0} ,{"name":"three",count:0} ,{"name":"four",count:0}]}

现在修改这样

<li ng-repeat="list in data.count"> 
    <a href="#" ng-click="count(list)"> 
     <span>{{list.name}}</span> 
     <span style="display: block;">Count: {{list.count}}</span> 
    </a> 
    </li>

然后将HTML传递OBJ作为参数传递给函数和增加该物体的数量

function MyCtrl($scope) { 
    $scope.data =jsonInfo; 

    $scope.counter = 0; 
    $scope.count = function (inc) { 
     inc.count = inc.count + 1 
    }; 
}

Demo

来源

2017-03-27 11:30:54

试试这个

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
\t 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <script type="text/javascript"> 
 
\t \t var myApp = angular.module('myApp',[]) 
 
\t \t .controller('MyCtrl', function MyCtrl($scope) { 
 
\t \t // body... 
 

 

 
\t \t var jsonInfo = [ 
 
\t \t { 
 
\t \t \t count:1, 
 
\t \t \t name:"one" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t count:1, 
 
\t \t \t name:"two" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t count:1, 
 
\t \t \t name:"three" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t count:1, 
 
\t \t \t name:"four" 
 
\t \t }] 
 

 
\t \t $scope.data =jsonInfo; 
 

 
\t \t $scope.counter = 0; 
 
\t \t $scope.count = function (inc) { 
 
\t \t \t inc.count = inc.count +1; 
 
\t \t }; 
 

 
\t }) 
 

 

 
</script> 
 

 
</head> 
 

 
<body> 
 
\t <div ng-controller="MyCtrl"> 
 
\t \t <ul> 
 
\t \t \t <li ng-repeat="list in data"> 
 
\t \t \t \t <a href="#" ng-click="count(list)"> 
 
\t \t \t \t \t <span>{{list.name}}</span> 
 
\t \t \t \t \t <span style="display: block;">Count: {{list.count}}</span> 
 
\t \t \t \t </a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 

 
</body> 
 

 
</html>

来源

2017-03-27 11:38:41

这是主要问题。我无法在JSON文件中添加“计数”。 :( – Vimal

不，你不能使用数据库 –

AngularJS中每个列表项的按钮点击次数

回答

相关问题