按输入日期过滤 ng 重复

Filter ng-repeat by input date

本文关键字：ng 重复 过滤 日期 输入      更新时间：2023-09-26

我目前正在做我的第一个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"
            }

            ]
}

我的控制器中什么都没有。我能够将搜索字段链接到数组中的特定字段，但问题是日期类型不起作用。希望你们能帮到我！

试试这个。

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>

您必须提及过滤器将通过哪一列工作 

filter:{TenderDate:searchDate}
相关文章：