javascript - 如何比较 Angular ng-class 中的日期

标签 javascript angularjs

我有以下代码

<div ng-class"{'has-error': myInputForm.$valid}">
  ...other stuff....
</div>

我喜欢这种验证,并且上面的代码有效。我想做的是比较两个日期值,所以它看起来像这样......

<div ng-class"{'has-error': myStartDate < eventStartDate}">
  ...other stuff....
</div>

这行不通,这个也行不通,但如果能行那就太好了

<div ng-class"{'has-error': moment(myStartDate).isBefore(eventStartDate)}">
  ...other stuff....
</div>

我可以创建一个函数来根据参数返回类

<div ng-class"getClass(myStartDate,eventStartDate)">
  ...other stuff....
</div>

但是我还有其他事情需要检查,所以我想内联执行此操作。让我知道您有什么想法并提前致谢。

最佳答案

不要忘记ng-class后面的等号。

你有ng-class"{'has-error': myStartDate < eventStartDate}"> 。应该是ng-class="{'has-error': myStartDate < eventStartDate}"=非常重要!

此外,请确保您的日期是真正的日期而不是字符串。

这是一个适合我的小演示页面。您可以向下调整“我的开始日期”并查看应用了 has-error 类。

祝你好运!

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function($scope) {
        $scope.myStartDate = new Date(2015, 6, 29);
        $scope.eventStartDate = new Date(2015, 6, 28);
      }]);
    </script>
    <style> .has-error { background-color: red; } </style>
  </head>
  <body>
    <form ng-controller="MyController">
      <label for="start-in">My Start Date</label>
      <input id="start-in" type="date" ng-model="myStartDate">
      <label for="event-in">Event Start Date</label>
      <input id="event-in" type="date" ng-model="eventStartDate">
      <div ng-class="{'has-error': myStartDate < eventStartDate}">
        {{myStartDate | date: "MM/dd/yyyy"}} -- {{eventStartDate | date: "MM/dd/yyyy"}}
      </div>
    </form>
  </body>
</html>

关于javascript - 如何比较 Angular ng-class 中的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34517592/

相关文章:

javascript - 如何正确排序整数数组

javascript - Angular - 获取 ng-repeat 对象

javascript - 将日期时间转换为有效的 JavaScript 日期

javascript - 使用 jQuery 单击父项时触发提交按钮的单击

javascript - Dispatch 不会立即更新组件

javascript - 如何处理 Angular 2 中的文件版本

javascript - 当我在 UI 中将其与 Angular JS 模型绑定(bind)时,图像未呈现为文本

angularjs - 观察变量并更改它

javascript - 确定调用了哪些 AngularJS 函数

javascript - 处理 Angular.js promise 错误状态