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 .
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 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)
So I am having a form and when I load the form I call a function with it. The function fills the form with some data.
$scope.fill = function {
$scope.formData.name = 'Sara';
console.log($scope.formData.name);
})
And on the index view I have the following:
<div class="form-group">
<input type="text" class="form-control" name="name" ng-model="formData.name"></div>
So when I press the the button :
<button ng-controller="formController" ui-sref="front.form.profile" ng-click="fill()">Fill</button>
I want the form about the name to be filled with the value I defined.
The problem I have is that the $scope is updated, on console.log I get the name sara but the form is still empty and does not get updated>
I added $scope.apply() in the end of the function but it does not make any change .
Please help
ng-controller="formController" ui-sref="front.form.profile" ng-click="fill()"
Also you created children controller, also $scope is child scope, so that if you change value of child scope, the value of "$scope.formData.name" of parent's scope not changing.
you can using two-way binding via directive.
references: https://docs.angularjs.org/guide/directive
I hope that is helpful for you!
Your button has its own controller:
<button ng-controller="formController"
That creates a child scope for the button only. Remove it. You should also create the ui-sref attribute, since you wan't the button to fill the form, not to navigate to another state.
Why does angular and the checkbox model not bind to the checked="checked". The checkbox is unset once angular loads.
eg: http://jsfiddle.net/5CZ74/2/
<div ng-app>
<form>
<input type="checkbox" ng-model="redirect" checked="checked">
<input type="text" ng-disabled="redirect==false">
</form>
</div>
When my form loads I am setting it enabled or disabled on the server as per server entity. How do I get the angular model to correctly bind to this value to enable or disable the input text field.
Thanks.
You have not defined redirect in your model anywhere, so it is undefined, and thus falsy. This is why the the checkbox is not checked. If you want it checked you need to add redirect to your model and set it to true. You need to have a controller and do this:
$scope.redirect = true;
See http://jsfiddle.net/5CZ74/3/
I have a problem with directive transclude and the form directive. As you may know, the form will end up in the "scope" if you add the "name"-property to the form tag, then you can check for form validation and so on.
My problem start when i put the form tag in a directive that uses transclude. I'm aware of how to deal with this problem with two-way data binding, as mention here https://stackoverflow.com/a/14484903/1029874 -- "use an object instead of a primitive"
But my form ends up in the transcluding directives scope. Here is an example of what i want to do.
<div ng-controller="appCtrl">
<widget>
<widget-header>{{model.property}}</widget-header>
<widget-body>
<!-- The form will end up in "widget-body":s scope instead of appCtrl:s scope -->
<form name="appForm" ng-submit="submit()">
<input type="text" required ng-model="model.property" />
<input type="submit" value="submit" />
</form>
</widget-body>
</widget>
</div>
And here is the fiddle, http://jsfiddle.net/WLksJ/1/
Is there a way that I can get around this behavior?
Thanks!
An interesting question, but a problem that's easily avoided by using
<form name="appForm" ng-submit="submit(appForm.$valid)">
and checking the parameter in the submit function.
http://jsfiddle.net/udMJ7/
Another (perhaps better) option is to use this which is set to the scope of the last controller (in this case the form controller, which we want)
$scope.submit = function(){
if(this.appForm.$valid){
//post the form!!
}
};
http://jsfiddle.net/udMJ7/1/