Filter doesn't work with dynamic input and ng-repeat
I am trying to filter entries in my relay based on an input text field, but it works unexpectedly and does not filter the correct entry.
My html code:
<input ng-model="txtTest" type="text" class="form-control" id="txtTest"></input>
<table>
<tr ng-repeat="SampleData in SampleInfo|MaxAmountFilter:txtTest" ng-form="SampleForm">
<td>
<div>
<input type="text" name="DateOfLoss" ng-Model="SampleData.DateOfLoss" </input>
</div>
</td>
<td>
<div>
<input type="text" name="LossDesc" ng-model="SampleData.LossDesc"> </input>
</div>
</td>
</tr>
</table>
My directive:
AngularApp.filter('MaxAmountFilter', function () {
return function(AmountArray, AmountEntered ) {
var filteredAmount = [];
angular.forEach(AmountArray, function (amt) {
if (AmountEntered >= amt.LossAmount) {
filteredAmount.push(amt);
}
});
return filteredAmount;
};
});
My area data is
$scope.SampleInfo = [
{ "DateOfLoss": "01/01/2014", "LossAmount": "100", "LossDesc": "sasa"},
{ "DateOfLoss": "01/01/2015", "LossAmount": "500", "LossDesc": "ssss" },
{ "DateOfLoss": "01/01/2011", "LossAmount": "102", "LossDesc": "ddd" },
{ "DateOfLoss": "01/01/2012", "LossAmount": "700", "LossDesc": "hhhh"},
{ "DateOfLoss": "01/01/2010", "LossAmount": "250", "LossDesc": "dsdsd"}
];
This works fine for static values, i.e. when I don't filter based on the input values of the textbox. What's wrong with the code. Please suggest!
EDIT: Plnkr here
Type 101, 102 then it works, but when you enter 10000 in the textbox it doesn't work. Now remove MaxAmountFilter:txtTest
from filter and just add MaxAmountFilter:10000
This will work.
source to share
Your input has no ng-model="txtTest"
. Thus, the text entered in the amount is not stored in txtTest
and txtTest
thus undefined.
EDIT:
Another problem is that you are using strings to represent numbers. See updated plunkr . Using type number input and replacing strings in objects by numbers does all well.
source to share