I have some nested states (the app is basically a multi-step form) and a parent state which keeps the main data model.
This is an example of nested state:
<input type="radio" label="item1" value="item1" ng-model="model.type" ng-click="next='1-1'" group="type" required /><br>
<input type="radio" label="item2" value="item2" ng-model="model.type" ng-click="next='1-2'" group="type" required />
<button ng-click="goToNext(next)">next</button>
Obviously if I click on a radio button next gets defined with ng-click and goToNext(next) works. But if I browse around some other states and come back here $scope.model.type is still defined but $scope.next isn't. What's the most clean way to keep $scope.next "re-executing" ng-click?
(I should replace this in dozens of forms..so it have to be very simple)
Related
Using AngularJS & Ui-router.
Problem scenario:
I have a set of fixed radio button on 10 over pages with
Daily, Weekly , Monthly and Yearly.
Toggling the radio button above will do a state.go which will set the state params to the value of the radio button selected (using ng-change, ng-model).
Current code which I duplicated on every page.
Now I would like to create an AngularJS Component for those radio buttons.
<div>
<label>
Daily
<input type="radio" ng-model="dateModel" value="Daily" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>'
</label>
<label>
WTD
<input type="radio" value="WTD" ng-model="dateModel" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>
</label>
</div>
This is a simplified plunker (Not working) but you can see what i'm trying to achieve.
First - I'm unable to even get the radio button to show despite already using a template.
Second - If it's able to show, I want it to show an alert when I toggle between the radio buttons (This is a test that the ng-change is working)
Lastly - I'll need to implement $state.go on every ng-change.
https://plnkr.co/edit/N5CDz0ZBhSG1leq3Hiw2?p=preview
The reason it's not loading is because you're not bootstrapping your app. Just add the ng-app directive to body. Everything else is correct.
See updated link: https://plnkr.co/edit/P34c6im4ojUI69sQDfhh?p=preview
I have an angular app in which i am using routing. In my template, i have a button defined as follows:
<button ng-model="button" ng-disabled="!checked" class="btn btn-primary">Button</button>
In the template i have in my partial view which is called in the ui-sref, i have the following:
Click me to toggle: <input type="checkbox" ng-model="checked">
So i would like to know how to enable and disable the button in the parent template based on the checkbox in the partial view.
So the question over here is how to transport the value from child to parent
so there are multiple ways to achieve so:
One in the child where you have ng-model, point the checked variable to parent checked variable.
What I mean is use something this way
Click me to toggle: <input type="checkbox" ng-model="$parent.checked"> or
<input type="checkbox" ng-model="$parent.$parent.checked"> based upon the heirarchy.
Second could be a easy fix but be sure with unique names:
use $rootScope. see $scope has it visibility between a view and controller but $rootScope has its visibility or life of $rootScope is valid for entire Angular Module.
Hope this help .
My application has a lot of models in the page. I want to detect whether user has changed value of any model on click of save. Using $watch on every model puts too much load, so don't want to use this method. Is there any good approach for this?
Small snippet is like below:
<div>
<div class="ttere2">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="specificDays" />
<input class="ggfe1" ng-model="nc2AfterDays" ng-disabled="nc2PenaltyAfter!='specificDays'" type="number" min="1" max="100" step="1" value="1" />days</div>
<div class="admin_wp-line">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="immediately"/> Immediately </div>
<div class="acfv1">model 1</div>
</div>
<div style="margin-top: 20px;"><button ng-click="saveData();">Done</button></div>
............too many inputs go here
</div>
Use .$dirty! Angular will set this on every element that is bound using ng-model, automatically, when it has been changed. It will also set it on the entire form. You can access it in code like this:
if ($scope.myForm.$dirty) {
// Your code here
}
Angular will provide six useful variables on the form, and every ngModel-bound element in your form: $dirty and $pristine, $valid and $invalid, and $touched and $untouched. You can mix and match these to drive a lot of useful behaviors, and they're available both in your controller (using the expression shown above) and your template (directly).
I am trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.
I have the following form in my AngularJS app which contain hidden fields with values filled based on user selection on some inputs on the form (radio buttons...etc), when the user click on the Submit link I should route the user to an external URL while passing hidden fields just as any normal form submission. Unfortunately I can't do this as some of the hidden field values are dependent on some calculations inside a function of the view related controller (as shown below in controller code, so I was wondering is there a way I can call the controller function from this form, then the controller function post the whole form and its field? Any example is highly appreciated. Thanks.
Note I am using link instead of a button.
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name" ng-model="client.name">
...
...
<input type="hidden" name="amount" ng-value="order.total">
...
...
<a class="orderButton" href="javascript:{}" onclick="document.getElementById('clientPaymentForm').submit(); return false;">Order Now</a>
</fieldset>
</div>
</form>
Controller:
$scope.processOrder = function(){
//Order calculation happens here to update order.total value and can only happen after click click Order Now to place the order...
};
I guess this is a bit late, but what you want to use is the ng-click directive which will allow you to call functions defined directly on the scope.
Assuming that you've defined $scope.processOrder, change your a tag to the following:
<a class="orderButton" ng-click="processOrder()">Order Now</a>
And everything should work as hoped.
Alternatively, you could use ng-submit on the form to have it work when you press the "Enter" or "Return" key, as in:
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-click="processOrder()">.