【问题标题】:How Can I Clear The Selected Field In Input Using Angularjs?如何使用Angularjs清除输入中的选定字段?
【发布时间】:2017-01-17 17:02:39
【问题描述】:

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

  • 看看我的 plunker 以供参考。

  • 我使用了开始日期和结束日期输入,用于过滤Due_date。如果我们选择开始日期,例如:-16-09-2016,则数据在表中已过滤。

  • 在该日期输入中,有一个 X close 按钮来清除字段,但如果我们单击 x 清除按钮,表格将显示为空数据。

  • 我们要寻找什么,如果我们点击x 清除按钮,它应该是清除选定的文件并需要在表中显示所有数据......就像我们给出的例子一样: - http://plnkr.co/edit/QuJvCXFpKbwVd0OlkHZ2?p=preview 这个 plunker 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

【问题讨论】:

    标签: html css angularjs meanjs


    【解决方案1】:

    在过滤器中添加日期验证

      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;
     }
    };
    });
    

    【讨论】:

      【解决方案2】:

      将过滤条件改为:

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

      如果未设置 fromto,这将删除日期限制。

      Plunkr


      编辑:请像这样添加括号:

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

      Updated Plunkr

      【讨论】:

      • 感谢您的宝贵回答,我们可以清除start date,但end date 不会过滤您的代码更改,所以请您检查并更新plunker.. ..谢谢....
      • 对不起,我的错误。请查看编辑后的答案和更新后的 Plunkr。
      • 非常感谢您的完美回答,我会在本地主机中检查并尽快更新您....谢谢
      猜你喜欢
      • 1970-01-01
      • 2017-04-09
      • 1970-01-01
      • 1970-01-01
      • 2016-02-01
      • 1970-01-01
      • 1970-01-01
      • 2015-07-03
      • 2016-07-11
      相关资源
      最近更新 更多