How to trigger the click event inside ng-repeat of angularjs? - angularjs

Question

I am doing the ng-repeat for showing the project list in my app. on click on the individual project I need to show the list of surveys inside the project. But when the page get loaded for first time I want to trigger the click event of first project which is default.
Below is the html code for that list project.
projectlist.html
<ul class="sidebar-nav">
<li class="sidebar-brand" >
<a>
Projects
</a>
</li>
<li ng-repeat="obj in allProjects track by $id(obj)">
<a ui-sref="survey.surveyList({id: obj.ProjectID})" ng-click="getProjSurveys(obj.ProjectID)" data-id="{{obj.ProjectID}}">{{obj.ProjectName}}<span class="projectsetting"><img src="./images/settings.png"/></span></a>
</li>
</ul>
ctrl.js
require('../styles/survey/survey.less');
angular.module("adminsuite").controller("surveyController",['getAllSurveyService','$timeout','AuthenticationService', '$scope','$rootScope', '$state', '$stateParams', function(getAllSurveyService,$timeout, AuthenticationService,$scope,$rootScope,$state,$stateParams){
$rootScope.header = "survey";
$scope.hoverIn = function(){
this.hoverEdit = true;
};
$scope.hoverOut = function(){
this.hoverEdit = false;
};
$rootScope.surveySelected = false;
console.log($('.checked').length);
console.log($('.checkbox').length);
if($state.current.name != 'login'){
$rootScope.bgGround = 'bgBlank';
$rootScope.footerbgGround = 'bgFooter';
}
$scope.supported = false;
$scope.wapLink = 'http://apidev.1pt.mobi/i/interview?uid=188A80CF0D61CA60D2F5_495F23E0FD4B9120D1E7&surveyid=20903';
$scope.success = function ($event) {
$scope.supported = true;
console.log($(".copied"));
};
$scope.fail = function (err) {
console.error('Error!', err);
};
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allProjects = data;
$scope.allSurveys = data[0].Surveys;
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
}
}
);
$scope.getReportDetails = function(){
return $http.get('http://localhost:8395/api/UserSurvey/GetAllSurveys', {
headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token}
})
};
$scope.getProjSurveys = function(projId){
var i;
for(i in $scope.allProjects){
if(projId == $scope.allProjects[i].ProjectID){
$scope.allSurveys = $scope.allProjects[i].Surveys;
}
}
angular.element(document.querySelectorAll(".surveymodule")).removeClass('toggled');
};
$scope.toggleClass = function($event){
angular.element($event.target).toggleClass("checked");
$rootScope.selectedItems = angular.element(document.querySelectorAll(".checked")).length;
angular.element($event.target).parent().toggleClass("active");
if(angular.element(document.querySelectorAll(".checked")).length < 1){
$rootScope.global.showNewHeader= false;
};
};
}]);
on-click of the projects I am able to show data in the ui-view but for the first time on load of the page unable to trigger click event for the first project. I tried with the above code inside the controller using angular.element and trigger('click'), but it is not working for me. Please help.

Answer 1

This is actually angularjs issue. JQuery's trigger click event not getting triggered in angular's ng-repeat.
Check this : https://github.com/angular/angular.js/issues/3470

Answer 2

The problem is you are using ui-sref along with ng-click. Here the state is changing before the function completes and either reloading the controller (if both states has same controller) or changing the controller. Hence ng-click finction is not running.
remove ui-sref and use $state.go() to change the state inside ng-click
Sample code here:
HTML
<ul class="sidebar-nav">
<li class="sidebar-brand" >
<a>
Projects
</a>
</li>
<li ng-repeat="obj in allProjects track by $id(obj)">
<a ng-click="getProjSurveys(obj.ProjectID)" data-id="{{obj.ProjectID}}">{{obj.ProjectName}}<span class="projectsetting"><img src="./images/settings.png"/></span></a>
</li>
</ul>
JS:
$scope.getProjSurveys(objId){
// your codes here
$state.go('survey.surveyList({'id': objId})')
}

Answer 3

Instead of trying to interact with the DOM you should do something like this:
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allProjects = data;
$scope.allSurveys = data[0].Surveys;
$scope.getProjSurveys($scope.allProjects[0].ProjectID)
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
// $state.go('login');
}
});