ng-repeat隐藏属性，如果它等于DateTime.MinValue

ng-repeat hide a property if its equals DateTime.MinValue

本文关键字：DateTime MinValue 如果 隐藏 属性 ng-repeat      更新时间：2023-09-26

我试图隐藏单元格（不是完整的行）包含一个等于DateTime.MinValue的日期，这基本上是0001-01-01T00:00:00 .

这是我的视图模型：

$scope.vm.users = [
    {
        "Username": "user1",
        "EarliestLogin": "0001-01-01T00:00:00",
        "LatestLogin": "0001-01-01T00:00:00"
    },
    {
        "Username": "user2",
        "EarliestLogin": "2016-07-15T11:18:19Z",
        "LatestLogin": "2016-07-15T11:18:19Z"
    },
    {
        "Username": "user3",
        "EarliestLogin": "0001-01-01T00:00:00",
        "LatestLogin": "0001-01-01T00:00:00"
    }
];

该表如下所示：

<table>
  <tr>
      <th>User Name</th>
      <th>Earliest Login</th>
      <th>Latest Login</th>
  </tr>
  <tr ng-repeat="user in vm.users">
      <td>{{user.Username}}</td>
      <td>{{user.EarliestLogin | date:'short'}}</td>
      <td>{{user.LatestLogin | date:'short'}}</td>
   </tr>
</table>

电流输出：

User Name   Earliest Login  Latest Login
user1   1/1/01 12:00 AM 1/1/01 12:00 AM
user2   7/15/16 1:18 PM 7/15/16 1:18 PM
user3   1/1/01 12:00 AM 1/1/01 12:00 AM

期望输出：

User Name   Earliest Login  Latest Login
user1   
user2   7/15/16 1:18 PM 7/15/16 1:18 PM
user3

我能够在ng-repeat上使用过滤器隐藏整行，但我不知道如何仅在单元格DateTime.MinValue时隐藏该单元格......

这是我的 plnkr。

乍一看，您可以创建一个帮助程序函数

$scope.vm.isDateTimeMinValue = function (value) {
    return value === "0001-01-01T00:00:00";
};

并在您的模板中使用它

<tr ng-repeat="user in vm.users">
    <td>{{user.Username}}</td>
    <td><span ng-hide="vm.isDateTimeMinValue(user.EarliestLogin)">{{user.EarliestLogin | date:'short'}}</span></td>
    <td><span ng-hide="vm.isDateTimeMinValue(user.LatestLogin)">{{user.LatestLogin | date:'short'}}</span></td>
</tr>

普伦克

注意！您可以使用相应的服务将"0001-01-01T00:00:00"定义为 Angular JS 常量。

将ng-if与单元格内span标签上的条件一起使用td取该$scope.DateTime.MinValue是一个具有所需最小值的 cope 变量：

<tr ng-repeat="user in vm.users">
   <td>{{user.Username}}</td>
   <td><span ng-if="$scope.DateTime.MinValue != user.EarliestLogin">{{user.EarliestLogin | date:'short'}}</span></td>
   <td><span ng-if="$scope.DateTime.MinValue != user.LatestLogin ">{{user.LatestLogin | date:'short'}}</span></td>
</tr>
相关文章：