How to reset all Models on click event? - javascript

My requirement: Have to reset my select boxes on button click
Example :-
I have 3 select boxes. When I click on the select box some different data will come and after that the result will get published. I added a Remove button which resets only its parent select box. Now, what I want to know is,how to reset all the three select box on clicking the remove button.
sample code is as under :-
<button ng-click="removeObj(key,model1,0)">Remove</span></button>
controller code is as under :-
scope.removeObj = function(modelID, subModelID, selectBoxPos) {
modelID = 0;
subModelID = 0;
})
I want on click of removeObj function all modelID data get reset to zero.
Please help.

As I understand you do not need any parameters.. only create a meaningful name resetModels:
AngularJS Controller:
$scope.resetModels = function() {
// Set default value to your models...
$scope.modelID = 0;
$scope.subModelID = 0;
});
Html:
<button ng-click="resetScpeModels()">Remove</span></button>

If you want to reset all the values. You should use it like this
$scope.model = {};
$scope.model.modelID = 0;
$scope.model.subModelID = 0;
<input ng-model="model.modelID"/>
If you want to reset it. Call again
$scope.model = {};
Inside ng-click function.

When you give a name to your form it automatically gets added to the $scope.
In angular we are having a $setPristine() method on the $scope.formName. which should recursively take care of resetting your form.
You can reset a form by, $scope.formName.$setPristine(); but if you're binding a model object to your inputs, you need to take care of clearing those too, ie:
$scope.formModel={}; or angular.copy({}, formModel);
Working demo :
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.Reset = function(formModel) {
angular.copy({}, formModel);
$scope.formModel = {};
$scope.submitForm.$setPristine();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="submitForm" ng-controller="myController">
<label for="first_field">First Model</label>
<input ng-model="formModel.firstModel" />
<br />
<label for="second_field">Second Model</label>
<input ng-model="formModel.secondModel" />
<br />
<button type="button" ng-click="Reset(formModel)">Reset</button>
</form>
</div>

Related

All checkboxes getting checked even if one is checked

I'm making a basic todo app in angularjs.
Here's the code that's used to create a new todo with a checkbox
<div class="container" ng-controller = 'controller' >
<h3>Enter Todo </h3> <input type="text" ng-model = 'new'>
<button ng-click = 'add();' ng-disabled="status();">Add</button>
<div ng-repeat = "i in todo" >
<input type="checkbox" ng-model = "todo.done" /> <label>{{i.name}}</label>
</div>
</div>
The problem is that all the checkboxes get checked even when I check just one
Here's my controller module
todoApp.controller('controller',['$scope',function($scope){
$scope.new = '';
$scope.todo = [];
$scope.add = function(){
$scope.todo.push({name : $scope.new, done: false});
console.log($scope.todo);
$scope.new = '';
};
$scope.status = function(){
return !(/\S+/.test($scope.new));
};
ng-model = "i.done"
should solve the problem. In your version ng-model = "todo.done" todo is an array and angular just creates a property on the fly, when it's used for the first time. This way all of your checkboxes are connected to this property, that's why checking one checkbox affects all of them.
Because the list of the checkbox are sharing the same model. You can create a custom directive or you can use checklist-model directive.
Demo URL:
https://vitalets.github.io/checklist-model/

ng-disabled fires all form validation when changes made in one form

I've multiple forms in a html page where each perform some operation like add, edit.
Every form has ng-disabled directive which checks some condition and it fires it's corresponding ng-disabled function when some changes occurs.
The problem is it fires all the ng-disabled function of every form when one changes values in one form.
Code :
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="check() || myForm.$invalid">DO</button>
</div>
<div ng-form="myForm2">
<input type="text" required ng-model="user.name2" placeholder="Username">
<button ng-click="doSomething2()" ng-disabled="check2() || myForm2.$invalid">DO</button>
</div>
</body>
Script code :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.check = function() {
console.log("check called");
}
$scope.check2 = function() {
console.info("check two called");
}
});
Plnkr link
You can see in console it runs all function when one of model changes.
I think it is a normal behaviour. The condition within your ng-disabled is re-executed each time your models change. So you get the 2 console.log each time you type something in your inputs. Then, if the return of your function is true, it disables your component, else it enables it.

Editable input text fields in AngularJs do not reset

I'm trying to edit a forms input text field. So the value is loaded from the API and then if you press edit button you can change the value and either cancel the changes or update with the new value you just entered. I try to to store the pre-edited value in a local variable so that I can be able to cancel the changes. Here is my code in the controller.
$scope.preEditFirstName = {};
$scope.edit = function(model) {
// Copy preedited data locally
$scope.preEditFirstName = angular.copy(model);
}
$scope.cancelEdit = function(model){
$scope.model = angular.copy($scope.preEditFirstName);
console.log($scope.model); //Correct result!
};
And here is the view
<div ng-show="beforeFirstNameEdit">
{{accountData.firstname || "Loading..."}}
</div>
<div ng-show="!beforeFirstNameEdit">
<input name="firstName" ng-model="accountData.firstname" placeholder="First Name" type="text" />
</div>
<div ng-show="beforeFirstNameEdit">
<button type="button" ng-click="beforeFirstNameEdit = false; edit(accountData.firstname)">Edit</button>
</div>
<div ng-show="!beforeFirstNameEdit">
<button type="button" ng-click="beforeFirstNameEdit = true; update(accountData.firstname)">Save</button>
<button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit(accountData.firstname)">Cancel</button>
</div>
At first you just see an "edit" button and when you press it the buttons save and cancel appear. So even if the local variable is correctly saved, when I press the cancel button the field does not show its pre-edit text. How can I fix this?
In cancelEdit use $scope.accountData.firstname instead of $scope.model
To make it reusable:
View:
<button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit('firstname')">Cancel</button>
Controller:
$scope.cancelEdit = function(model){
$scope.accountData[model] = angular.copy($scope.preEditFirstName);
};
So now cancelEdit will work for all models starting with accountData.*

Trying to update one input's value to another's using angularjs

I'm fairly new using AngularJS but I've been using for a pet project and I've run in to an issue. What I basically want to do is take the text input from this input field:
<form id="ci_search_form">
<p class="input-append"><label>Search:</label> <input type="text" id="query" ng:model="query" autofocus> <button ng:click="clearSearch()" class="btn"><i class="icon-remove"></i></button></p>
</form>
and update this input field's value with that value:
<div><input type="text" id="ciquery" ng:model="ciquery.Name"></div>
The second input filters some data and I can type in that directly and it works. However this page will have different sets of data, each with their own search input that I want updated by the master input at the top. I can't set value="" or use jQuery to set the value either, it just appears blank unless I explicitly type in that second input field. Can anyone assist with a solution?
EDIT
I thought I should include my app and controller code:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.clearSearch = function(){
$scope.query = '';
}
});
EDIT 2
Made some progress. Created a function that can be called an update ciquery in $scope:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$scope.ciquery = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.queryUpdate = function(){
$scope.ciquery = $scope.query;
}
$scope.clearSearch = function(){
$scope.query = '';
$scope.queryUpdate();
}
});
This works great. However, this creates another issue. Before in ciquery I was using ciquery.Name to filter only on the Name attribute. With this new solution I had to change it to this:
<div><input type="hidden" id="ciquery" ng:model="ciquery"></div>
This searches all fields in my data which returns unwanted results. Suggestions?
$scope and ng-model are differents. You should give ng-model's property to ng-click's function. Looks at this -> Ng-model does not update controller value
To update second input's field (here an example -> http://jsfiddle.net/yEvSL/1/)
<div><input type="text" id="ciquery" ng:model="query"></div>

Simulating a submit and validation to a separate form on AngularJS

How to simulate submit plus validation on a form whose button is outside of it?
It can be done with this:
HTML:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<div style="visibility: hidden">
<input type="submit" id="clcikMe" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</div>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" linked="clcikMe">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
Javascript:
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
app.directive("linked",function(){
return function (scope, element, attrs) {
var id = attrs["linked"];
element.on("click",function(){
document.getElementById(id).click();
});
};
});
But I wanted to stay away from that approach, it's very kludgy, it triggers a validation+submit by simulating a submit on first form by clicking its hidden submit button
Is there an API on AngularJS (or even plain javascript) that will let me achieve my objective? I.e. without using any hidden submit button
You're not thinking very Angular here. No one is forcing you to work with form ng-submit. Just use 2 buttons each with their own ng-click="runThisFunction()" or simply use the same function and pass along a parameter. i.e:
<button ng-click="submitForm(true)">Validate + Submit</button>
and
<button ng-click="submitForm(false)">Only Validate</button>
Then in your controller:
$scope.submitForm = function(shouldSubmit) {
//run validation here.
//either using $scope.form.name.$valid or ng-model $scope variable
var dataGood = false;
if ($scope.sample === "goodData" && $scope.sample === "alsoGoodData" ) {
//data is good
dataGood = true;
//alert user that data is good!
alert('good job, your data is great!');
}
else {
//data is bad
alert (' data bad, dear padowan');
}
if (!shouldSubmit) return;
//perform $http request to server, or navigate to a different page or whatever
if (dataGood) {
//submit data to server and let the party begin
$http.post('/api/rocknroll/submit', { sample: $scope.sample, sampleX: $scope.sampleX}).then( $scope.handleResponse);
}
}
This will work whether or not you're in the scope of the form, but you need to be in the scope of the controller.

Categories