隐藏角度Js中的表格行答案

【问题标题】：Hide table rows in angular Js隐藏角度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 非常感谢！！！

标签： angularjs

【解决方案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 我希望这能解决类似的情况：stackoverflow.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。希望对您有所帮助。

【讨论】：