applying filter custom filer on ng-model giving error angular.js:12416 Error:

Datetime:2016-08-23 02:34:17         Topic: AngularJS          Share        Original >>
Here to See The Original Article!!!

when newbie in angular. getting error while using the custom filter to ng-model.

angular.js:12416 Error: [ngModel:nonassign]

there is a filter which is taking two digits after decimal. when i try to implement that filter i got that error and can not able to edit the value. any help will be appreciated.

here is my code.




<td><input data-ng-model="OverallDiscountPercentage" min="0" validate onkeyup="checkInput(event,this);" onkeydown="checkInput(event,this);" onkeypress="javaScript:return isNumber(event);" class="numberbox" max="100" /><span>%</span></td>

<td><input id="txtDiscount" data-ng-change="GetOverallDiscountPercentage()" data-ng-model="OverallDiscount|AmountDecimalPlaces" onkeyup="checkInput(event,this);" onkeydown="checkInput(event,this);" name="OverallDiscount" id="discountbox" onkeypress="javaScript:return isShippingNumber(event);" min="0" />

<div class="CurrencySymbol" data-ng-bind-html="OrganizationCurrency"></div> </td>



$scope.GetOverallDiscountPercentage = function () {

$scope.OverallDiscountPercentage = GetPercentageOrAmount($scope.OverallDiscount, true);


app.filter("AmountDecimalPlaces", function () {

return function (price) {

var priceDecimalScale = $('#hdfPriceDecimalScale').val()

var defaultValue = $("#hdfDefaultValue").val();

if (price == '')

price = defaultValue

price = parseFloat(price).toFixed(priceDecimalScale);

if (price.indexOf(".") != -1 && price.split('.')[1].length > 2) {

if (price.split('.')[1].length <= 0)

price = price + defaultValue.split('.')[1];

if (price.split('.')[1].length == 1)

price = price + "0";


return price;



Solution :

You shouldn't use filter with ng-model. If you want to format model value or view value you can use ngModelController

NgModelController provides API for the ngModel directive. The controller contains services for data-binding, validation, CSS updates, and value formatting and parsing. It purposefully does not contain any logic which deals with DOM rendering or listening to DOM events. Such DOM related logic should be provided by other directives which make use of NgModelController for data-binding to control elements. angularjs provides this DOM logic for most input elements. At the end of this page you can find a custom control example that uses ngModelController to bind to contenteditable elements.

About List