吳重複使用點擊顯示/隱藏不能正常工作

這是我使用的指令，有一個從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>

來源

2016-08-10 iSNSD09

你能提供html嗎？ – Rob

您可以切換每個tr元素。你可能想要在你的「元素」變量（或者它的某個孩子/父母）上進行分類。 Angular.element！=元素 – Noppey

@Rob我添加了HTML – iSNSD09

的element您正在收聽的單擊事件是指令本身，所以每次你點擊該指令裏面的東西，每一個<tr>將有toggleClass執行。

因此，而不是element.on("click",....你應該做element.find("tbody.task-tbody tr").on("click",...。

如果你只是想用＃F8F8F8背景切換<tr>的可見性，我建議你添加一個類來更容易地定位它。

[編輯] 你的鏈接功能是：

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

來源

2016-08-10 20:22:27 ValLeNain

您的方法將得到與op相同的結果。你將最終找到所有'tr'元素。 –

你是對的，我忘了說在處理程序中，你必須使用'this'來引用clicked元素而不是'angular.element ...'=>'this.toggleClass（「hidden」）'。 – ValLeNain

你有angular.element("tbody.task-tbody tr")錯誤的查詢，你必須指定你要顯示

第一隱藏所有TR，然後只顯示一個與TR例如特定ID

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

在模板中指定任務ID：

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

來源

2016-08-10 20:30:28 neuronet

沒有你的HTML很難確定，但我相信你的問題是angular.element("tbody.task-tbody tr").toggleClass("hidden");。

angular.element(document)別名一個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"); 
 
     }); 
 
    } 
 
    } 
 
});

我認爲這將解決您的問題。

來源

2016-08-10 21:04:36 GrundleFuck

吳重複使用點擊顯示/隱藏不能正常工作

回答

相關問題