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を見せたいし、次に示し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"); 
 
     }); 
 
    } 
 
    } 
 
});

私はこれがあなたの問題を解決すると思います。