I'm currently working on a project where I need to display buttons for choosing a username using ng-repeat. The display of the buttons is working fine, however, I have encountered an issue with the ng-click directive within the loop. Even though the binding appears correct in Google Chrome's DOM Explorer, when one of the buttons is clicked, the event handling function login() receives {{user.userId}} as input instead of the actual value of the parameter.
Here is the code snippet:
<div class="cell large-3" ng-repeat="user in userData()" ng-class="{'large-offset-1': ($index % 3) != 0}">
<button ng-click="login('{{user.ID}}')" class="button expanded red bigButton"> {{user.userName}} </button>
</div>
Controller Code:
(function () {
'use strict';
angular.module('app').controller('loginCtrl', ['$scope', '$controller', '$location','dataService', 'mainService', initializeLoginCtrl]);
function initializeLoginCtrl($scope, $controller,$location, dataService, mainService) {
angular.extend(this, $controller('baseCntrl', {
$scope: $scope
}));
$scope.userData = dataService.getUserData;
$scope.login = function(userID) { <-- input of userid is {{userData.ID}} instead of the eal userID from Binding
mainService.login(userID);
}
}
})();
Any help or guidance would be greatly appreciated! Thank you!