Search code examples
htmlcssangularjsmeanjs

How Can I Clear The Selected Field In Input Using Angularjs?


I am using MEAN stack in my application with AngularJS as my front-end. How Can I clear selected filed in input element,My Plunker

  • Look at my plunker for reference.

  • I have used Start date and End date inputs , which is used to filter the Due_date. If we select Start Date like:- 16-09-2016 the data's has filtering in the table.

  • In that date input has one X close button to clear the field, but which is not working, if we click that x clear button the table is showing like empty data's.

  • What we excatly looking for , if we click that x clear button it's should to be clear selected fileds and need to display all datas in table ....like we have given the exaple plunker is here :- http://plnkr.co/edit/QuJvCXFpKbwVd0OlkHZ2?p=preview for this plunker x clear button is working perfectly, I don't where I made a mistake,

  • Please help us.

My controller for daterange filter:-

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

My html :-

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

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

Filter for daterange:-

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

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

    </tr>

I have created my plunker to reference :- My Plunker


Solution

  • Add date validation in your filter

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