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/
Related
I have a set of projects in an object each projects come with this HTML section
<label class="checkbox-container">
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox">
<span class="checkmark"></span>
</label>
I want to ensure that if a property in my project is true then my HTML checkbox should show checked or selected.
When I inspect my HTML element when I click the checkbox I can't see the angularjs property that is making my tag look selected or checked for me to write a function for it.
The ng-selected directive only works for <select> tags.
For input of type "checkbox", use the ng-checked directive instead.
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox"
ng-checked="property">
If $scope.property is true, then your box should be checked.
I'm generating a group of radio buttons options from a JSON object which is requested when another radio button is selected. This works as expected but the form validation is not working correctly since the form only becomes valid if all the options in the radio button group are first clicked.
My mark-up for the radio button:
<div data-ng-repeat="option in options" class="radio">
<label>
<input type="radio" name="decline_type_id" ng-model="decline_type_id" value="{{option.id}}" ng-required="!decline_type_id" />
<strong>{{option.name}}</strong>
</label>
</div>
Here is my plunker:
https://plnkr.co/edit/B7KgUt4GMrnSATYIQuN5?p=preview
The same mark-up without the loop works as expected, so I don't understand what it is about the loop used to generate the list that is breaking the validation of the form until all options are selected?
This is a Angular scoping issue. The ng-model inside the ng-repeat is using a child scope.
The ng-model="decline_type_id" was unique for each iteration of the loop. So ng-required check was for each unique model.
You can make use of $parent scope to do the ng-required checking on a shared variable instead.
<input type="radio" ng-model="$parent.decline_type_id" value="{{option.id}}" ng-required="!$parent.decline_type_id" />
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 .
Hey guyz i am having issue related to checkboxes in html, i am using angularjs.
Whenever i checked one checkbox other checkbox getting selected and vice-versa.
Here's my Html code.
<form ng-show='MyForm'>
<div ng-controller="MyController">
<div name="sampleName" ng-repeat="sample in list" >
<input ng-model="q.sample" type="checkbox" >{{sample.name}}</label>
</div>
</div>
<button ng-click="submitForm()" >Submit</button>
<button ng-click="cancelForm()">Cancel</button>
</form>
But instead of using scope variable name 'q.sample', if i use only $scope.sample then it is working fine.
Still there is another issue with this too, On submitting data my form gets closed, but when i open it again, it shows me fresh form, there is no checked field, but if i cancel the form instead of submitting it with checked values and again opened it , i dont want the checked values to be present but i am getting the checked values instead of fresh form.
I tried to make values false in checkbox field on cancel button . See my Code of cancelForm()
$scope.cancelForm = function() {
$scope.MyForm = false
$scope.q.sample = false
}
So Basically, i have two questions, one is why i am getting all checkboxes selected on selected only one checkbox when i am using
$scope.q.sample
Second when i am using only
$scope.sample
scope value of sample is not reflecting on UI though it is reflecting in JS, i am getting the checked checkboxes.
It is because you are binding ng-model to the same controller property with this:
ng-model="q.sample"
Instead, if you want to select each individually then you need to have a different ng-model for each checkbox.
At the moment, you are changing q.sample and this, then, binds the value of q.sample to all the other checkboxes that define ng-model="q.sample".
Try something like this instead:
<div name="sampleName" ng-repeat="item in list" >
<input ng-model="item.checked" type="checkbox" >{{sample.name}}</label>
</div>
and then in cancelForm():
$scope.cancelForm = function() {
$scope.MyForm = false
angular.forEach($scope.list, function(item) {
item.checked = false;
});
}
Indeed as David Tryon mentioned, you are assigning the same ng-model to all the checkboxes and what you want is a different ng-model for each checkbox.
You can solve this by assigning a javascript expression to ng-model
for example:
ng-model="list[$index].checked"
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).