javascript - AngularJS show in div if date is today, otherwise show in other div - Stack Overflow

The idea is that I have several items in my array, which have a title, pany and date value. These are t

The idea is that I have several items in my array, which have a title, pany and date value. These are then shown in a div with ng-repeat.

What I want is for them to be shown in the first div if the date value is today's date and in a different div if the date value is not today. (Ideally, I would separate them in Today, Yesterday, Last Week, etc.)

What it currently does is show the dates in the first div and display their date as today, even though the value is not set like that in the array. And the second div is pletely empty.

JS:

var app = angular.module("myApp", []);

app.controller("boardController", function($scope) {
    $scope.today= new Date();
    $scope.posts = [
       {
           "Title" : "Alfreds Futterkiste",
           "Company" : "Microsoft",
           "Date" : "2016-06-19",

        },{
            "Title" : "Berglunds snabbköp",
            "Company" : "IBM",
            "Date" : "2016-06-18",
        },{
            "Title" : "Centro ercial Moctezuma",
            "Company" : "MexaTel",
            "Date" : "2016-06-03",
        },{
            "Title" : "Ernst Handel",
            "Company" : "BlaBlaCar",
            "Date" : "2016-06-11",
        }
    ]
});

The HTML is structured like this:

<body ng-controller="boardController">
        <!--  Products Container  -->
        <div class="col-xs-12 col-md-8 col-md-offset-2">
            <!--  Product Container  -->
            <h2>Today</h2>
            <div class="list-group-item" ng-repeat="post in posts">
                <div ng-if="post.Date = today">
                    <h3>
                        {{post.Title}}
                    </h3>
                    <h5>
                        {{post.Date | date : 'EEE MMM d'}}
                    </h5>
                </div>
            </div>
            <h2>Yesterday</h2>
            <div class="list-group-item" ng-repeat="post in posts">
                <div ng-if="post.Date > today">
                    <h3>
                        {{post.Title}}
                    </h3>
                    <h5>
                        {{post.Date | date : 'EEE MMM d'}}
                    </h5>
                </div>
            </div>
        </div>
    </body>

The idea is that I have several items in my array, which have a title, pany and date value. These are then shown in a div with ng-repeat.

What I want is for them to be shown in the first div if the date value is today's date and in a different div if the date value is not today. (Ideally, I would separate them in Today, Yesterday, Last Week, etc.)

What it currently does is show the dates in the first div and display their date as today, even though the value is not set like that in the array. And the second div is pletely empty.

JS:

var app = angular.module("myApp", []);

app.controller("boardController", function($scope) {
    $scope.today= new Date();
    $scope.posts = [
       {
           "Title" : "Alfreds Futterkiste",
           "Company" : "Microsoft",
           "Date" : "2016-06-19",

        },{
            "Title" : "Berglunds snabbköp",
            "Company" : "IBM",
            "Date" : "2016-06-18",
        },{
            "Title" : "Centro ercial Moctezuma",
            "Company" : "MexaTel",
            "Date" : "2016-06-03",
        },{
            "Title" : "Ernst Handel",
            "Company" : "BlaBlaCar",
            "Date" : "2016-06-11",
        }
    ]
});

The HTML is structured like this:

<body ng-controller="boardController">
        <!--  Products Container  -->
        <div class="col-xs-12 col-md-8 col-md-offset-2">
            <!--  Product Container  -->
            <h2>Today</h2>
            <div class="list-group-item" ng-repeat="post in posts">
                <div ng-if="post.Date = today">
                    <h3>
                        {{post.Title}}
                    </h3>
                    <h5>
                        {{post.Date | date : 'EEE MMM d'}}
                    </h5>
                </div>
            </div>
            <h2>Yesterday</h2>
            <div class="list-group-item" ng-repeat="post in posts">
                <div ng-if="post.Date > today">
                    <h3>
                        {{post.Title}}
                    </h3>
                    <h5>
                        {{post.Date | date : 'EEE MMM d'}}
                    </h5>
                </div>
            </div>
        </div>
    </body>
Share Improve this question asked Jun 19, 2016 at 8:23 PaulVOPaulVO 3093 silver badges15 bronze badges 3
  • = is assignment, == and === are parison operators. – elclanrs Commented Jun 19, 2016 at 8:24
  • @elclanrs with that changed, nothing shows up at all in the the first div OR the second div. – PaulVO Commented Jun 19, 2016 at 8:28
  • I believe today date can not be lesser than any other date in past. – vp_arth Commented Jun 19, 2016 at 8:34
Add a ment  | 

1 Answer 1

Reset to default 4

Since Date is a string and today is Date object you need to cast them both to the same type in order to pare properly. I would use date filter to format today to the same string as Date:

app.controller("boardController", function($scope, $filter) {
    $scope.today = $filter('date')(new Date(), 'yyyy-MM-dd');
    // ...
});

and then in HTML you would have (note === parison operator)

ng-if="post.Date === today"

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745454899a4628440.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信