I want to clear an input field on button click, but I want to have a function in controller for it.
So I use
<div ng-click="emptyInput('filter')">clear</div>
And then a function
$scope.emptyInput = function(elemName){
$scope.elemName = null;
}
but it does not work, because it clears $scope.elemName that does not exist at all. How can i tell to use function parameter as name after $scope. ?
Related
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 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;
}
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 am showing radio button in html using practices is a json array
<div id="rows" ng-repeat="practice in practices">
<input type="radio" ng-model="practice.id" ng-value="practice.id">
</div>
When I tried to access value of this radio button using code mentioned below in controller, it gave me a message "undefined...."
$window.alert($scope.practice.id);
when you put something in an ng-repeat it puts the values in a child scope - so you would need to access the individual values of the practices collection by index of the collection.
like so:
$scope.practices[index].id
the other option is to also have a ng-click directive that would allow you to be notified on the user selecting the id - which you could do two ways
either:
ng-click="changedPracticeId($index)"
this would call the function defined in scope with the index, so you could access the individual item by index, like above. then the function could look something like this:
$scope.changedPracticeId = function (index) {
window.alert($scope.practices[index].id);
}
or
ng-click="changedPracticeId(practice.id)"
this would give you the id of the value so your function would look something like this:
$scope.changedPracticeId = function (id) {
window.alert(id);
}
don't see a controller per input row, so your controller is probably for ALL radio buttons.
so what you got in your scope is actually $scope.practices and not $scope.practice.
if you want to see any change, you can use
$scope.$watchCollection('practices', function (newValue) {...});
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.