Prevent input from form $dirty
If user don't want to allow a field | form fields for dirty check by angular, Use $pristine vale as false.
by Yashwanth M
HTML
<body ng-app='nodirty' >
<div ng-controller="myCtrl">
<div ng-form="form">
<!-- Changing this should not set the form dirty-->
<select id="javaVersionID" name="select" data-ng-model="javaVersionID"
data-ng-options=" options.name for options in javaVersion"
data-ng-init="javaVersionID = 1.6">
</select>
<input ng-model="modelNum" name="input" no-dirty-check>
</div>
<h1>Dirty? {{form.$dirty}}</h1>
<!-- https://gist.github.com/umidjons/886f246e997b495e604d -->
<br>
<input ng-model="modelVal" format-number>
<br><br> Model value: <p>{{modelVal}}</p>
</div>
</body>
JavaScript
(function( ng ) {
// https://stackoverflow.com/a/17216875/5081877
var nodirty = ng.module('nodirty', []);
// formatNumber
nodirty.directive('noDirtyCheck', function( $filter ) {
// Interacting with input elements having this directive won't cause the
// form to be marked dirty.
return {
restrict: 'A',
// Directive requires 'ngModel' to access ngModelController.
require: 'ngModel',
link :function(scope,elem,attrs,ngModelCtrl){
ngModelCtrl.$pristine = false;
}
}
});
nodirty.directive('formatNumber',function($filter){
return {
require:'ngModel',
link :function(scope,elem,attrs,ngModelCtrl){
scope.$watch(
function(theScope) {
console.log('Calling watch list from the `digest-loop` as the model-Value becomes dirty.');
return theScope.modelVal;
},
function(newValue, oldValue) {
console.log('Watch list « Old:',oldValue,'\t New:',newValue);
}
);
}
};
})
nodirty.controller('myCtrl', ['$scope', '$timeout', nodirtyFun]);
function nodirtyFun($scope,$timeout) {
$timeout(function(){
$scope.form.select.$pristine = false;
//$scope.form.input.$pristine = false;
});
$scope.javaVersion=[
{'name': '5.0'},
{'name': '6.0'},
{'name': '7.0'},
{'name': '8.0'},
];
// default value
$scope.modelVal=0;
// change value programmatically
setTimeout(function(){
$scope.modelVal=123456.786; // in input will be shown as 123,456.79
},100);
}
})(window.angular);