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

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

Answer 2

如果没有您的HTML，很难确定，但我相信您的问题是angular.element("tbody.task-tbody tr").toggleClass("hidden");。

angular.element(document)别名jQuery函数（ng docs）。在这种情况下，它会使选择器别名并选择"tbody.task-tbody tr"中的所有行。因此，当您调用.toggleClass("hidden")时，jQuery正在应用＆＃34;隐藏＆＃34;所有这些元素的类。

鉴于您只想隐藏已被单击的元素，您可以使用提供的指令元素的引用来应用＆＃34; hidden＆＃34;专门针对那个元素。

例如：

＆＃13;

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");
      });
    }
  }
});

＆＃13;

我认为这可以解决您的问题。

Answer 3

您正在侦听click事件的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"); 
  });
}

Ng-repeat使用单击显示/隐藏无法正常工作

3 个答案: