How to trigger the click event inside ng-repeat of 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.

Just call $scope.getProjSurveys($scope.allSurveys[0]). If your click event relies on having the element available, then in Angular terms you are likely doing something wrong — Rhumborl
– Rhumborl, Commented Sep 8, 2016 at 7:53
Also your current code isn't working because when you set $scope.allSurveys, that is all you have done. The binding to ng-repeat happens later — Rhumborl
– Rhumborl, Commented Sep 8, 2016 at 7:54

Sreekanth Karini · Accepted Answer · 2016-11-29 11:45:05Z

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

answered Nov 29, 2016 at 11:45

Sreekanth Karini

1,28514 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syam Pillai · Accepted Answer · 2016-09-08 07:55:21Z

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})')
}

Fábio Santos · Accepted Answer · 2016-09-08 07:58:13Z

0

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');
    }
  });

answered Sep 8, 2016 at 7:58

Fábio Santos

5631 gold badge5 silver badges12 bronze badges

1 Comment

Kishan Over a year ago

I have added the entire controller code. Please check

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related