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"
            }


            ]
}

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

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>

Answer 2

您必须提及您的过滤器将使用哪个列

filter:{TenderDate:searchDate}

按输入日期过滤ng-repeat

2 个答案: