Javascript angularjs将计数限制为当前范围

我正试图设置一个计数器，在这里，我可以为列表中的每个国家统计点击次数，并加上一个总计数

到目前为止，我有以下可以在中查看的内容。我面临的问题是，我无法保持每个国家的计数是唯一的。如何做到这一点

    <div ng-app="myApp">
    <div data-ng-view></div>
    </div>

    'use strict';
    var myApp = angular.module('myApp', ['ngRoute', 'templates/view1.html', 'templates/view2.html']);

    myApp.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'templates/view1.html',
                controller: 'CountryListCtrl'
            })
            .when('/:id', {
                templateUrl: 'templates/view2.html',
                controller: 'CountryCtrl'
            })
    }]);

    myApp.factory('Countries', ['$q', function ($q) {
        var countriesList = [];    
        // perform the ajax call (this is a mock)
        var getCountriesList = function () {
            // Mock return json
            var contriesListMock = [
                {
                    "id": "0",
                        "name": "portugal",
                        "abbrev": "pt"
                }, {
                    "id": "1",
                        "name": "spain",
                        "abbrev": "esp"
                }, {
                    "id": "2",
                        "name": "angola",
                        "abbrev": "an"
                }
            ];
            var deferred = $q.defer();
            if (countriesList.length == 0) {
                setTimeout(function () {
                    deferred.resolve(contriesListMock, 200, '');
                    countriesList = contriesListMock;
                }, 1000);
            } else {
                deferred.resolve(countriesList, 200, '');
            }
            return deferred.promise;
        }

        var getCountry = function(id) {
            var deferred = $q.defer();
            if (countriesList.length == 0) {
                getCountriesList().then(
                    function() {
                        deferred.resolve(countriesList[id], 200, '');
                    },
                    function() {
                        deferred.reject('failed to load countries', 400, '');
                    }
                );
            } else {
                deferred.resolve(countriesList[id], 200, '');
            }
            return deferred.promise;
        }

        var cnt      = 0;
        var cntryCnt = 0;    

        var incCount = function() {
               cnt++;
               return cnt;        
        }

        var incCntryCount = function(id) {
               cntryCnt++;
               return cntryCnt;        
        }

        return {
            getList: getCountriesList,
            getCountry: getCountry,
            getCount : function () {
                return cnt;
            },
            getCntryCount : function () {
                return cntryCnt;
            },        
            incCount: incCount,
            incCntryCount: incCntryCount      
        };
    }]);

    myApp.controller('CountryListCtrl', ['$scope', 'Countries', function ($scope, Countries) {
        $scope.title = '';
        $scope.countries = [];
        $scope.status = '';

        Countries.getList().then(
            function (data, status, headers) { //success
                $scope.countries = data;
            },
            function (data, status, headers) { //error
                $scope.status = 'Unable to load data:';
            }
        );
    }]);

    myApp.controller('CountryCtrl', ['$scope', '$routeParams', 'Countries', function ($scope, $routeParams, Countries) {
        $scope.country = {
            id: '',
            name: '',
            abbrev: ''
        };
        var id = $routeParams.id;

        Countries.getCountry(id).then(
            function(data, status, hd) {
                console.log(data);
                $scope.country = data;
                $scope.countOverall = Countries.getCount;
                $scope.countCntry = Countries.getCntryCount;
                $scope.clickCnt = function () {
                    $scope.countTotal = Countries.incCount();
                    $scope.country.clicks = Countries.incCntryCount(id);
                    console.log($scope);
                };  
            },
            function(data, status, hd) {
                console.log(data);
            }
        );   

    }]);


    angular.module('templates/view1.html', []).run(["$templateCache", function ($templateCache) {
        var tpl = '<h1>{{ title }}</h1><ul><li ng-repeat="country in countries"><a href="#{{country.id}}">{{country.name}}</div></li></ul>';
        $templateCache.put('templates/view1.html', tpl);
    }]);

    angular.module('templates/view2.html', []).run(["$templateCache", function ($templateCache) {
        var tpl = '<div>{{country.name}} clicks {{countCntry()}} <br> overall clicks {{countOverall()}}</div><button><a href="#">BACK</a></button><button ng-click="clickCnt()" >count clicks ++ </button>';
        $templateCache.put('templates/view2.html', tpl);
    }]);

"严格使用",；
var myApp=angular.module（'myApp'，['ngRoute'，'templates/view1.html'，'templates/view2.html']）；
myApp.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider
。当（“/”{
templateUrl:'templates/view1.html'，
控制器：“CountryListCtrl”
})
.when（“/：id”{
templateUrl:'templates/view2.html'，
控制器：“CountryCtrl”
})
}]);
myApp.factory（'Countries'，['$q'，function（$q）{
var countriesList=[]；
//执行ajax调用（这是一个模拟）
var getCountriesList=函数（）{
//模拟返回json
var contriesListMock=[
{
“id”：“0”，
“名称”：“葡萄牙”，
“abbrev”：“pt”
}, {
“id”：“1”，
“名称”：“西班牙”，
“abbrev”：“esp”
}, {
“id”：“2”，
“名称”：“安哥拉”，
“abbrev”：“an”
}
];
var deferred=$q.deferred（）；
如果（countriesList.length==0）{
setTimeout（函数（）{
延迟。解决（ContreesListMock，200，”）；
countriesList=ContreesListMock；
}, 1000);
}否则{
延期。决议（countriesList，200，”）；
}
回报。承诺；
}
var getCountry=函数（id）{
var deferred=$q.deferred（）；
如果（countriesList.length==0）{
getCountriesList（）。然后(
函数（）{
延迟。解决（countriesList[id]，200，”）；
},
函数（）{
延迟。拒绝（'加载国家/地区失败'，400'）；
}
);
}否则{
延迟。解决（countriesList[id]，200，”）；
}
回报。承诺；
}
var-cnt=0；
var cntryCnt=0；
var incCount=函数（）{
cnt++；
返回cnt；
}
var incCntryCount=函数（id）{
cntryCnt++；
返回cntryCnt；
}
返回{
getList:getCountriesList，
getCountry:getCountry，
getCount:函数（）{
返回cnt；
},
getCntryCount:函数（）{
返回cntryCnt；
},        
incCount:incCount，
incCntryCount:incCntryCount
};
}]);
myApp.controller（'CountryListCtrl'，['$scope'，'Countries'，函数（$scope，Countries）{
$scope.title=''；
$scope.countries=[]；
$scope.status=''；
Countries.getList（）。然后(
函数（数据、状态、标题）{//success
$scope.countries=数据；
},
函数（数据、状态、标题）{//错误
$scope.status='无法加载数据：'；
}
);
}]);
myApp.controller（'CountryCtrl'，['$scope'，'$routeParams'，'Countries'，函数（$scope，$routeParams，Countries）{
$scope.country={
id:“”，
名称：“”，
缩写：“”
};
变量id=$routeParams.id；
Countries.getCountry（id）。然后(
功能（数据、状态、高清）{
控制台日志（数据）；
$scope.country=数据；
$scope.counttotal=Countries.getCount；
$scope.countCntry=Countries.getCntryCount；
$scope.clickCnt=函数（）{
$scope.countTotal=Countries.incCount（）；
$scope.country.clicks=Countries.incCntryCount（id）；
console.log（$scope）；
};  
},
功能（数据、状态、高清）{
控制台日志（数据）；
}
);   
}]);
angular.module（'templates/view1.html'，[]）。运行（[“$templateCache”，函数（$templateCache）{
var tpl='{{title}}
count clicks++；
$templateCache.put（'templates/view2.html'，tpl）；
}]);

问题在于您没有根据国家增加计数。现在正在做小提琴

编辑：

我已经更新了小提琴：

我基本上是将cntryCnt变成一个对象文字，它将国家id作为一个属性，并保持每个id的正确计数，如下所示：

var cnt      = 0;
var cntryCnt = {};

...

// The function now receives the country id and increments the specific country clicks only.
var incCntryCount = function(id) {
       cntryCnt[id] = cntryCnt[id] || 0;
       cntryCnt[id]++;
       return cntryCnt[id];        
}

其余的更改在模板中，基本上只在获取或增加计数时将国家id作为参数发送

此外，这不是一个角度特定的问题，而是一个编程一般问题