隐藏角度Js中的表格行

Posted 2023-02-22

【中文标题】隐藏角度Js中的表格行

【英文标题】：Hide table rows in angular Js

【发布时间】：2015-11-30 23:42:25

【问题描述】：

我有一张桌子，如果它们满足条件，我已经使用 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>

【问题讨论】：

向我们展示您的代码。你现在的问题很模糊，条件是什么？

@yvesmancera 编辑了它。

你的curly braces呢？！

@Priya。欢迎来到SO。请您也分享您的控制器代码吗？

@all 非常感谢！！！

【参考方案1】：

我认为这样的事情应该可行。基本上，单击按钮将在显示所有或仅显示标记为“未收到数据”的项目之间切换。

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

// in controller
$scope.showAll = true;

$scope.onButtonClick = function() 
  $scope.showAll = !$scope.showAll;
  return false;

【讨论】：

感谢@GPicazo，但我正面临这个问题错误：[$rootscope:infdig] 10 $digest() 达到了迭代。

谢谢你，但现在我被另一个按钮困住了，我必须在其中显示不满足条件的行。 @GPicazo

【参考方案2】：

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

    <tr ng-show ="your_condition">

【讨论】：

谢谢，我正在尝试相同但面临角度问题错误：[$rootscope:infdig] 10 $digest() 达到迭代

@Priya 我希望这能解决类似的情况：***.com/questions/14376879/…

【参考方案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。希望对您有所帮助。