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

Question

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

Answer 1

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

Answer 2

Change the filter condition to:
if (date.isAfter(moment(from)) || from == null && date.isBefore(moment(to)) || to == null)
This will remove the date constraint if from or to is not set.
Plunkr
Edit: Please add brackets like this:
if ((date.isAfter(moment(from)) || from == null) &&
(date.isBefore(moment(to)) || to == null)) {
//...
}
Updated Plunkr