使用angularjs在API中的两个日期之间进行过滤

时间:2017-07-06 18:51:50

标签: javascript html angularjs

我使用以下脚本根据用户ID从API语句中检索帐户的详细信息

    $http.post("http://testingserver.net/statement.php",{'id':$scope.account_number}).success
    (function(data){
    console.log(JSON.stringify(data));
$scope.statement=data;
    });

从日志中我可以获得详细的数据。来自日志的数据包含一个名为Date的字段,其格式为2017-02-01T00:00:00Z,我想要实现的是让用户从两个日期范围中进行选择并将结果推回给用户。

从下面的HTML中,它们是两个字段,即sdateedate

HTML

<form method="post" name="statement" id="statement">
<div class="list">
  <label class="item item-input">
    <span class="input-label">Search From</span>
    <input type="date" ng-model="sdate">
  </label>
  <label class="item item-input">
    <span class="input-label">Search To</span>
    <input type="date" ng-model="edate">
  </label>
</div>
</form>
</br>
<div align="center">
<p><button class="button button-positive" ng-disabled="statement.$invalid" ng-click="state_request()">
  <i class="icon ion-android-search icon"></i> Search
</button></p>
</div>

HTML for results

<div ng-repeat="item in statement">
  <table width="100%" border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td width="70%"><div align="left">
        <p><strong> Period</strong>      </p>
      </div></td>
      <td width="82%">{{item.Date |date: 'MMMM yyyy'}}</td>
    </tr>
    <tr>
      <td><p><strong>Category</strong></p></td>
      <td>{{item.Category}}</td>
    </tr>
    <tr>
      <td><div align="left">
        <p><strong>Amount</strong>      </p>
      </div></td>
      <td><div align="left">{{item.Amount}}</div></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
</div>

3 个答案:

答案 0 :(得分:0)

如果您尝试格式化日期,可以使用momentjs javascript time/date lib

这使得格式化和处理日期非常容易,特别是关于时间输入。

答案 1 :(得分:0)

我们需要为我们的业务逻辑创建一个函数并传递悲伤和编辑:您可以尝试这样做:

state_request = function(sdate,edate){
    if(new Date(sadte) < new Date(edate)){
    // now write here the web service logic
    //$http.post('domain/startDate=sadte&endDate=edate'){

    }.then(function(req,res){
    //bind your html variable from here like, res.a,res.b etc
    });
    }
    }

答案 2 :(得分:0)

你有两种方法:
1)添加开始/结束日期并使用服务器进行繁重的工作 2)发回所有结果并过滤客户端。

前者可能是最好的方式。如果你这样做,你需要在你的url的查询参数中使用日期sdate和edate服务器将处理,然后使用某种存储过程来进行日期范围检查。我不是一个PHP人 - Java更像是我的强项,而Angular 4 / Ionic。