I am still a beginer in angularjs
How to reset the input field in the below plunker.
Enter the value in the input field and click on review will populate the value in the view. I need to clear those on clicking reset
<iframe src='http://embed.plnkr.co/JzmpYK/preview'></iframe>
Thanks in advance
Modify your reset() function so that it is equaling a copy of the original vehicles variable. You want to reference an object that is not being updated like a masterCopy variable.
$scope.vehiclesMaster = angular.copy($scope.vehicles);
$scope.reset = function(){
$scope.vehicles = $scope.vehiclesMaster;
}
Related
I have a form with preset values from an object in scope. When I modify a form field for instance the name field and change it from Bob to Bobby the form is now dirty but if I delete the "y" and the "b" from the end of the name the form is now in its original state but it is still dirty. How do I get it to return to pristine when the form is the same as when it started out? I have the original state saved in scope so they can be compared but I am not connecting the dots on how to achieve this.
Here is an example that shows the same behavior I was describing above:
http://www.angularjshub.com/examples/forms/formreset/
Try something like the below in your controller, and then use the ng-change to call the function.
$scope.resetWhenUnchanged = function()
{
if (original === $scope.modifiedValue) {
$scope.personForm.field.$setPristine();
}
};
I'm able to find form data is changed or not using $dirty.
ex: I changed text box or drop down and then $dirty become true. If I reverted to old data still it is true. I need to know if my changes are reverted or not. Do we have any property in Angularjs? If property is true I want to enable save button otherwise it should be disable.
https://docs.angularjs.org/api/ng/type/form.FormController
I need to implement around 10 pages and each page has 10 text boxes and a couple of drop downs. So I don't want track each control manually in my pages.
You can try using this module: https://github.com/betsol/angular-input-modified
From the README file:
This Angular.js module adds additional properties and methods to the
ngModel and ngForm controllers, as well as CSS classes to the
underlying form elements to provide end-user with facilities to detect
and indicate changes in form data.
This extra functionality allows you to provide better usability with
forms. For example, you can add decorations to the form elements that
are actually changed. That way, user will see what values has changed
since last edit.
Also, you can reset an entire form or just a single field to it's
initial state (cancel all user edits) with just a single call to the
reset() method or lock new values (preserve new state) just by calling
overloaded $setPristine() method.
DISCLAIMER: I haven't tried it myself and I notice the author overwrites the ngModel directive instead of adding a decorator, which could be dangerous...but at the very least, you can look at the source and get an idea of how to write your own service or directive with similar functionality.
Even though it does not follow the usage of $dirty, but an implementation similar to this might be helpful for you in the case of a Save button on update.
Inside your html:
<form name="testForm" ng-controller="ExampleController" ng-submit=" save()">
<input ng-model="val" ng-change="change()"/>
<button ng-disabled="disableSave">Save</button>
</form>
Inside your controller:
.controller('ExampleController', ['$scope', function($scope) {
$scope.disableSave = true; // Keep save button disabled initially
$scope.val = 'Initial'; // Initial value of the variable
var copyVal = $scope.val; // Copy Initial value into a temp variable
$scope.change = function() {
$scope.disableSave = $scope.val === copyVal;
};
$scope.save = function() {
// Save the updated value (inside $scope.val)
console.log($scope.val);
// Re-disable the input box (on successful updation)
copyVal = $scope.val;
$scope.disableSave = true;
};
}]);
Here is a working plunkr for the same.
I've a function which deletes individual items from the array, based on the value i pass. Here's the flow:- I call a function on click of a button deleteImage('{{image}}') and in the controller i've function defined. Here's the function
$scope.deleteImage = function(image) {
console.log(image); // Output : {{image}} instead of image url
// code to delete items from array
}
The problem here is when i checked the console, i can see the image value in the element attribute ng-click="deleteImage('url_of_the_image')", but in controller, the image variable is having the value {{image}}. What could be the issue here ?
you do not need to interpolate the value.
ng-click="deleteImage(image)"
should be enough to fix your issue.
I have a javascript plugin that convert persian date . everything works well except one thing .
I've added a default value for input like : $scope.myDate='13930101' ;
But i'd like to update it when user click on new date . How can i update the $scope ? should i create a directive for that ?
Thanks
Plunker
This is the really nice thing about Angular, you don't have to watch simple variables to update them in the $scope. Take out ng-change="newDate()" on your date field. When you use ng-model on an input field, any changes made to that input field will be reflected in the variable you set it to.
The other thing you can do is move your onClick function into the angular ng-click function you created:
$scope.showDate = function() {
// alert($scope.myDate);
PersianDatePicker.Show('thisDate', $scope.myDate);
};
That will grab the current value of $scope.myDate and pass it into the plugin:
Plunker
I have a fiddler setup, when i click a reset button it should clear out the input controls, this seems to work but not when the input type='url'
Here is the fiddler
Is there an issue or something that I am not understanding.
When I set
$scope.myform = {};
This seems to clear out the other input type but the input type='url' isn't being cleared.
Anyone know why?
The issue you see happens when you don't have a valid value inside the input[type="url"]. An invalid value just stays in the view (the input field) and doesn't get pushed to the scope variable inside ng-model. The variable will be updated only when and if the value is correct.
You can test it by entering a valid value. The reset button will work. If you enter an invalid value it won't.
You can fix it by setting $scope.myform = null instead of $scope.myform = {}. This will empty the field because the scope variable (expression) will be undefined. It will be automatically created by Angular once you enter a valid value inside any of the fields.
Because you need to put a valid url in the 2nd box like http://www.abc.com, then the reset button will work.
In order to correctly update the view/model, I would suggest that you explicitly reset the model's properties like so:
$scope.reset = function() {
$scope.myform = {
foo: '',
bar: ''
};
$scope.formName.$setPristine();
};
Setting 'myform' to an empty object deletes its fields, it doesn't set them to a blank string. It's quite likely angular's cleanup may not be deleting the value the view is referencing, thus the confusion between the application's model and view states.
Hope it helped.