Question

我有一张桌子，如果满足条件，我已经使用ng-class给它了CSS。现在我想只显示那些在按钮点击上满足相同条件的行。我写了一个控制器，检查收到的数据是否在24小时内没有，并标记数据单元格。在此之前它正在工作。现在我需要添加一个按钮，只显示那个标记为未及时收到的td的行。

<tbody>

       <tr ng-repeat ="data in log">
            <td>{{data.UniqueId}}</td>
            <td>{{data.Name}}</td>
            <td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime
        }}
        </tbody>
    </table>

Answer 1

根据提供的信息，我可以说：使用ng-show根据您的情况显示行。

    <tr ng-show ="your_condition">

Answer 2

我认为这样的事情应该有效。基本上，点击该按钮将在显示全部或仅显示标记为＆＃39;未收到数据的项目之间切换。

Answer 3

您还可以使用 ng-if 而不是ng-show。请参阅差异here。

真正取决于隐藏/显示切换需要发生的频率。

 <tbody>
        <tr ng-repeat="data in log" ng-if="showLast24Hrs(data.ReceivedTime)">
          <td>{{data.UniqueId}}</td>
          <td>{{data.Name}}</td>
          <td>{{data.ReceivedTime}}</td>
      </tbody>

然后在控制器中

$scope.showLast24Hrs = function(receivedTime){
    if($scope.isLast24Hours) {
      return receivedTime < 200;  // Write your less than 24 hours check here
    }
    return true;
  }

我写了这个demo on Codepen。希望有所帮助。

以角度Js隐藏表格行

3 个答案: