Question

我在这个项目中使用的是typescript和angular。我有一个带有隐藏列的表，其中“th”和“td”都被隐藏。如果用户想要删除一行，我想显示该特定行的隐藏列。它是'ng-hide =“$ ctrl.isInvisible”'的行，它应该显示在表头中，并且列出成员的行中的特定'td'和它具有相同的'ng-hide'

我的代码现在：

HTML

<table>
      <thead>
        <tr
          <th>Name</th>
          <th>Class</th>
          <th>Amount</th>
          <th>Delete</th>
          <th ng-hide="$ctrl.isInvisible">Restore</th> <!--this is the hidden th-->
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="member in $ctrl.members| orderBy: '-id'">
          <td>{{member.name}}</td>
          <td>{{member.class}}</td>
          <td>{{member.amount}}</td>
          <td>
            <a href="#" ng-click="$ctrl.removeMember(member)">
              <i class="material-icons listicon">delete</i>
            </a>
          </td>           
          <td ng-hide="$ctrl.isInvisible">
            <a href="#" ng-click="$ctrl.restoreMember(member)">
                <i class="material-icons listicon">restore</i>
            </a>
          </td> <!--This is the hidden td -->
        </tr>
      </tbody>
    </table>

构造函数设置'isInvisible = true'以便工作。但是，当表项被设置为删除时，我的代码会使每个'td'显示还原图标：

打字稿：

  removeMember() {
   this.isInvisible = false;
  }

有谁知道如何显示隐藏的'th'和特定的'td'，但仍然保留'td'的其余部分？

Answer 1

您可以使用ng-show，这比尝试隐藏某些内容更好，然后您可以使用以下内容设置它的逻辑：

<div ng-show="elementEnabled">
  <button ng-click="editorEnabled=!editorEnabled"></button>
</div>

<div ng-show="!elementEnabled">
  <button ng-click="editorEnabled=!editorEnabled"></button>
</div>

elementEnabled变量将由ng-click属性处理，因此它将首先显示真值，直到您单击第一个div内的按钮并且该div将隐藏而另一个将隐藏表演等。您可以将此示例用于您的td和th。

编辑：好的，对不起我误解了一些东西。因此，如果你只需要在删除成员时隐藏元素，你可以做同样的事情，但我不建议显示和隐藏列标题，我建议像这样：

<table>
      <thead>
        <tr
          <th>Name</th>
          <th>Class</th>
          <th>Amount</th>
          <th>Action or Option</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="member in $ctrl.members| orderBy: '-id'">
          <td>{{member.name}}</td>
          <td>{{member.class}}</td>
          <td>{{member.amount}}</td>
          <td>
            <a href="#" ng-show="showElement" ng-click="showElement=!showElement">
              <i class="material-icons listicon">delete</i>
            </a>
            <a href="#" ng-show="!showElement" ng-click="showElement=!showElement">
                <i class="material-icons listicon">restore</i>
            </a>
          </td>           
        </tr>
      </tbody>
    </table>

通过这种方式，您将拥有一个包含选项，删除和恢复的操作列，具体取决于具体情况，这对于每个项目都是独立的（您觉得这很酷吗？）。显示的第一个元素是删除选项，如果单击该选项，它将显示还原选项，您不需要自己处理该变量。我希望这适合你：）。

在一个表格行

1 个答案: