Ng-repeat를 사용하면 표시/숨기기가 올바르게 작동하지 않음을 나타냅니다.

Question

사용중인 지시문입니다. JSON에서 동적으로 생성 된 이름 목록이 있습니다. 이름을 클릭하면 그 이름에 대한 자세한 정보가있는 창을 표시하거나 숨기려고합니다. 대신 목록의 모든 이름에 대해 모든 창을 표시하거나 숨 깁니다. 내가 클릭 한 창을 표시하거나 숨기고 싶습니다.

JS :

이

app.directive("taskListing", function() { 
     return { 
      restrict: 'E', 
      templateUrl: "/templates/elements/tasklisting.html", 
      scope: {}, 
      link: function(scope, element, attrs, $sce){ 
       element.on("click", function(){ 
        angular.element("tbody.task-tbody tr").toggleClass("hidden"); 
        }); 
       }, 


      }; 

     }); 

HTML :

<table class="table" ng-controller="taskController"> 
<tbody class="task-tbody" ng-repeat="task in tasks" ng-if="task.title != ''"> 
    <tr > 
     <td> 
      <span class='tasks-task'>{{task.title}}</span> 
     </td> 
    </tr> 

    <!--This table row is toggled show/hide--> 
    <tr class="hidden" bgcolor="#F8F8F8" > 
     <td> 
      <strong>Description:</strong> 
      <p>{{task.description}}</p> 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 1

element 당신은 클릭 이벤트가 지시 자체 듣고, 그래서 매번 당신이 지시어 안에 뭔가를 클릭, 모든 <tr>가있을 것이다 toggleClass가 수행되었습니다.

따라서 element.on("click",.... 대신 element.find("tbody.task-tbody tr").on("click",...을 사용해야합니다.

<tr>의 가시성을 # F8F8F8 배경으로 토글하고 싶다면 더 쉽게 타겟팅 할 수있는 클래스를 추가하는 것이 좋습니다.

[편집] 귀하의 링크 기능은 다음과 같습니다

function(scope, element) { 
    element.find("tbody.task-tbody tr").on("click", function() { 
    this.toggleClass("hidden"); 
    }); 
} 

Answer 2

당신은 하나를

첫 숨기기 모든 TR을 보여주고 싶어하고 보여 그럴 필요는 지정해야합니다 angular.element("tbody.task-tbody tr")의 잘못된 쿼리를 예를 들어 특정 ID는

angular.element("tbody.task-tbody tr").addClass('hidden'); 
angular.element("#task_8").removeClass('hidden'); 

템플릿에 작업 ID를 지정합니다

<tr id="task_{{task.id}}"> 

Answer 3

HTML이 없으면 확신하기가 어렵지만 문제는 angular.element("tbody.task-tbody tr").toggleClass("hidden");입니다.

angular.element(document) 별칭 a jQuery 함수 (ng docs). 이 경우 선택기의 별명을 지정하고 "tbody.task-tbody tr"의 모든 행을 선택합니다. 따라서 .toggleClass("hidden")을 호출 할 때 jQuery는 모든 요소에 "숨겨진"클래스를 적용합니다.

클릭 한 요소 만 숨기고 싶다면 지시문의 요소에 제공된 참조를 사용하여 해당 요소에 "숨김"을 독점적으로 적용 할 수 있습니다. 예를 들어

는 :

app.directive("taskListing", function() { 
 
    return { 
 
    restrict: 'E', 
 
    templateUrl: "/templates/elements/tasklisting.html", 
 
    scope: {}, 
 
    link: function(scope, element, attrs, $sce){ 
 
     element.on("click", function(){ 
 
     // use element instead of 'angular.element' 
 
     element.toggleClass("hidden"); 
 
     }); 
 
    } 
 
    } 
 
});

나는이 문제를 해결할 것이라 생각합니다.