Question

在网络应用中，我使用angularjs的ng-repeat指令显示项目列表。然后点击每个项目，将摘要控制器分配到摘要页面（使用ui-routing）并显示结果。目前如果有10个列表项显示使用ng-repeat会发生什么，然后10次汇总控制器正在点击一个项目初始化。最终这让我的app有点慢。这是我在HTML中的ng-repeat代码。

<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
    <span class="surveycheckbox" ng-click="toggleClass($event)"></span>
    <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
    <div class="col-xs-5 col-sm-2  col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>                               
    <div class="col-xs-5 col-sm-2  col-md-1">
        <span class="title_thumb">
           <span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP"  my-Tooltip />
          <span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS"  my-Tooltip />
          <span class='fa fa-desktop' ng-show="survey.Type=='Web'"  title="WEB" my-Tooltip/>
        </span>
    </div>
    <div class="col-sm-3  col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
    <div class="col-sm-2  col-md-2 hidden-xs SurveyLastChild">124</div> 
    <div class="hidden-xs surveyListTool"  ng-show="hoverEdit">
        <a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
        <a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
        <a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
        <a class="menuSurvey" title="menu">
             <i class="fa fa-circle fa-2"></i>
             <i class="fa fa-circle fa-2"></i>
             <i class="fa fa-circle fa-2"></i>
        </a>
    </div>
    </div>
    <!-- On click Of the list am showing this div box -->
    <div class="surveyDetailsBox"> <!--This is the header section -->
        <div class="surveyDetailHead">
              <p class="surveyTitle">{{survey.SurveyName}}</p>
              <div class="surveyDetailHeadTool" >
                   <a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
                   <a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
                   <a class="menuSurvey"  title="menu">
                        <i class="fa fa-circle fa-2"></i>
                        <i class="fa fa-circle fa-2"></i>
                        <i class="fa fa-circle fa-2"></i>
                    </a>
                    <a class="hidden-xs"  title="close"><i class="fa fa-angle-up fa-2"></i></a>
               </div>
        </div>
        <!--This is the body section where summary and other modules are present -->
        <div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
             <div class="row">
                <div class="col-xs-12 col-md-12">
                    <div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
                        <div class="list-group">
                            <a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
                            <a ui-sref="survey.surveyList.questionare" class="list-group-item "  ui-sref-active="active">Questionaire Management</a>
                            <a ui-sref="survey.surveyList.sampleManagement" class="list-group-item "  ui-sref-active="active">Sample Management</a>
                            <a ui-sref="survey.surveyList.quotaManagement" class="list-group-item "  ui-sref-active="active">Quota Management</a>
                            <a ui-sref="survey.surveyList.scheduling" class="list-group-item "  ui-sref-active="active">Scheduling</a>
                            <a ui-sref="survey.surveyList.notification" class="list-group-item "  ui-sref-active="active">Notifications</a>
                            <a ui-sref="survey.surveyList.reports" class="list-group-item "  ui-sref-active="active">Reports</a>
                            <a ui-sref="survey.surveyList.location" class="list-group-item "  ui-sref-active="active">Geolocation</a>
                        </div>
                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
                </div>
            </div>
        </div>

对于像Summary，questionnare等每个子模块，一个控制器是关联的。

点击此列表，显示摘要框并运行控制器。

surveyIdForQuota()的代码在这里

$scope.surveyIdForQuota = function(SurveyID){
    $rootScope.quotaSurveyID = SurveyID;
    $scope.exportViewDetails="";
      $http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
        then(function(response){
          console.log(response);
          $scope.summaryDetails = response.data;
      },function(error){console.log(error)})
  };

Answer 1

ng-click应添加到列表项
上

<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>

您的第一个div是父div，但您在列表中写了ng-click。所以，如果你点击div的任何地方。它将调用方法

控制器在单击angularjs中的项目时多次运行？

1 个答案: