javascript - 按输入日期过滤 ng-repeat

Question

我目前正在开发我的第一个 angularJS 项目，但我陷入了困境。那么我想做什么？

我正在尝试使用输入类型中选定的日期来过滤我的 ng-repeat = 日期，这是我的观点:

<div class="form-group col-md-3">
    <label for="date">Tender Date</label>
    <input type="date" id="date" ng- model="searchDate.TenderDate"class="form-control">
</div>

<div >
    <table class="table table-bordered">

        <thead>

            <th>Tender ID</th>
            <th>Business unit</th>
            <th>Therapy Unit</th>
            <th>Tender Date</th>

        </thead>
        <tbody ng-repeat="tender in tenders | filter:searchDate">
            <td>{{tender.TenderID}}</td>
            <td>{{tender.businessUnit}}</td>
            <td>{{tender.therapyUnit}}</td>

            <td>{{tender.TenderDate}}</td>
        </tbody>

    </table>


</div>

这是我的 json 文件:

{
"Tenders":[{
            "businessUnit": "GN_RE S-RETAIL",
            "therapyUnit" : "Hospital Product ",
            "TenderID" : "BE_13_N2.1_001",
            "TenderDate" : "2016-03-17"
            },

            {
                "businessUnit": "GN_RE S-RETAIL",
                "therapyUnit" : "Hospital Product ",
                "TenderID" : "BE_13_N2.1_01",
                "TenderDate" : "2016-03-18"
            }


            ]
}

我的 Controller 里什么都没有。我可以将搜索字段链接到数组中的特定字段，但问题是日期类型不起作用。希望大家能够帮助我!

Answer 1

试试这个。

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
  $scope.tenders = {
"Tenders":[{
            "businessUnit": "GN_RE S-RETAIL",
            "therapyUnit" : "Hospital Product ",
            "TenderID" : "BE_13_N2.1_001",
            "TenderDate" : "2016-03-17"
            },

            {
                "businessUnit": "GN_RE S-RETAIL",
                "therapyUnit" : "Hospital Product ",
                "TenderID" : "BE_13_N2.1_01",
                "TenderDate" : "2016-03-18"
            }


            ]
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main">
    <div class="form-group col-md-3">
    <label for="date">Tender Date</label>
    <input type="date" id="date" ng-model="searchDate"class="form-control">
</div>

<div >
    <table class="table table-bordered">

        <thead>

            <th>Tender ID</th>
            <th>Business unit</th>
            <th>Therapy Unit</th>
            <th>Tender Date</th>

        </thead>
        <tbody ng-repeat="tender in tenders.Tenders | filter: {TenderDate: searchDate }">
            <td>{{tender.TenderID}}</td>
            <td>{{tender.businessUnit}}</td>
            <td>{{tender.therapyUnit}}</td>

            <td>{{tender.TenderDate}}</td>
        </tbody>

    </table>


</div>
   </div>
</div>