2017-01-02 66 views
-2

在web應用程序中,我使用了angularjs的ng-repeat指令來顯示項目列表。並且每個項目的點擊都是爲彙總頁面分配彙總控制器(使用ui-routing)並顯示結果。目前,如果使用ng-repeat顯示10個列表項目,那麼會發生什麼情況,然後10次總結控制器在點擊一個項目時得到初始化。最終這使得我的應用程序有點慢。這是我在html中的ng-repeat代碼。控制器在angularjs中點擊項目多次運行?

<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> 

對於像摘要,等等問卷作爲每個子模塊,一個控制器被相關聯。

點擊此列表顯示彙總框並運行控制器。

代碼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)}) 
    }; 
+0

顯示'surveyIdForQuota代碼()' – charlietfl

+0

增加了對surveyIdForQuota(代碼) – Kishan

+0

分享您'div'標籤完整的代碼 –

回答

0

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的任何地方。它會調用該方法

+0

這也有我嘗試但不工作... – Kishan

+0

不解釋爲什麼?好奇是什麼原因是我自己 – charlietfl

+0

如果你嘗試這種情況會發生什麼?並請分享您的完整div代碼。 –