如何使用Angularjs清除输入中的选定字段?

时间:2016-09-09 14:00:35

标签: html css angularjs meanjs

我在我的应用程序中使用MEAN堆栈,将AngularJS作为我的前端。如何在输入元素My Plunker

中清除选定的字段
  • 请看我的傻瓜作为参考。

  • 我使用了开始日期和结束日期输入,用于过滤Due_date。如果我们选择开始日期,请执行以下操作: - 16-09-2016数据已在表格中进行过滤。

  • 在该日期输入中有一个X close按钮来清除该字段,但是如果我们点击该表格显示的x清除按钮,该按钮无效空数据

  • 我们热切地寻找,如果我们点击x清除按钮,它应该是明确选择的文件并需要在表格中显示所有数据....就像我们给出的那样exaple plunker在这里: - http://plnkr.co/edit/QuJvCXFpKbwVd0OlkHZ2?p=preview对于这个弹药x清除按钮工作正常,我不会在哪里犯错,

  • 请帮助我们。

我的日期范围过滤器控制器: -

 .filter("myfilter", function() {
     return function(items, from, to) {
       var df = from;
         var dt =to;
           var result = [];   
             console.log(to);
            for (var i=0; i<items.length; i++){
           var date = moment(items[i].invoice_date);
          date.add(items[i].terms,'d');
         var tf = date;
       if (date.isAfter(moment(from)) && date.isBefore(moment(to)))  {
                    result.push(items[i]);
                }
            }   
             //console.log(items);
            return result;
      };
    });

我的HTML: -

 <input type="date" class="form-control" name="from" ng-model="from">

  <input type="date" class="form-control" name="to" ng-model="to">

过滤日期范围: -

   <tr ng-repeat="data in  record | myfilter:from:to">

    <td> {{addDays(data.invoice_date,data.terms) | date:'yyyy-MM-dd'}}</td>

    </tr>

我创建了我的plunker来引用: - My Plunker

2 个答案:

答案 0 :(得分:0)

在过滤器中添加日期验证

  app.filter("myfilter", function() {
  return function(items, from, to) {
  if(from.length!=0 && to.length!=0)
  {
     var df = from;
     var dt =to;
     var result = [];   
    console.log(to);
    for (var i=0; i<items.length; i++){
        var date = moment(items[i].invoice_date);
        date.add(items[i].terms,'d');
        var tf = date;
        if (date.isAfter(moment(from)) && date.isBefore(moment(to)))  {
            result.push(items[i]);
        }
      }   
     //console.log(items);
      return result;
   }else
 {

   return items;
 }
};
});

答案 1 :(得分:0)

将过滤条件更改为:

if (date.isAfter(moment(from)) || from == null && date.isBefore(moment(to)) || to == null)

如果未设置fromto,则会删除日期约束。

Plunkr

编辑:请添加如下括号:

if ((date.isAfter(moment(from)) || from == null) && 
    (date.isBefore(moment(to)) || to == null))  {
    //...
}

Updated Plunkr