Is there a way to pass to angular directive ng-click the value of the associated input?
In other words, what should replace this.value in the following:
<input type="checkbox" id="cb1" ng-click="checkAll(this.value)" />
PS. I don't want a workaround to alternate values, I just wonder if is possible to pass a value of an input as argument to an angular function.
You can do the following things:
Use ng-model if you want to bind a html component to angular scope
Change ng-click to ng-change
If you have to bind some value upon checking and un-checking the checkbox use ng-true-value="someValue" and ng-false-value="someValue"
The order of execution of ng-click and ng-model is ambiguous since
they do not define clear priorities. Instead you should use ng-change
or a $watch on the $scope to ensure that you obtain the correct values
of the model variable.
Courtesy of musically_ut
Working Demo
<input type="checkbox" id="cb1" ng-model="check" ng-change="checkAll(check)" ng-true-value="YES" ng-false-value="NO"/> Citizen
Today i wanted to do the same thing and i see nobody answered the actual question. This is against the Angular philosophy, but you can replace "this.value" with "$event.target.checked" :
<input type="checkbox" id="cb1" ng-click="checkAll($event.target.checked)" />
Assigning an ng-model to it will return boolean value depending upon the change to it:
<input type="checkbox" id="cb1" ng-model="checkValue" ng-change="checkAll(checkValue)" />
Better to use ng-change rather than ng-click
Bind the checkbox to a value and pass it to ng-click.
<input type="checkbox" ng-model="value" id="cb1" ng-click="checkAll(value)" />
You can do the following things. Worked for me.
<input type="checkbox" id="cb1" ng-click="onChecked($event.target.checked)" />
Related
I referred to this before asking this question: AngularJs doesn't bind ng-checked with ng-model
If ng-checked is evaluated to true on the html side, the ng-model is not updated. I can't ng-repeat as suggested in the above question because I have to use some styling for each checkbox.
Here is the plunker that I have created to illustrate my problem.
http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t
To see what I want, please open the console, and just click on Submit button. Please don't check any checkboxes.
ngModel and ngChecked are not meant to be used together.
ngChecked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked by default.
You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.
What is it exactly that you're trying to do? If you just want the first checkbox to be checked by default, you should change your model -- item1: true,.
Edit: You don't have to submit your form to debug the current state of the model, btw, you can just dump {{testModel}} into your HTML (or <pre>{{testModel|json}}</pre>). Also your ngModel attributes can be simplified to ng-model="testModel.item1".
http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview
You can use ng-value-true to tell angular that your ng-model is a string.
I could only get ng-true-value working if I added the extra quotes like so (as shown in the official Angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)
ng-true-value="'1'"
What you could do is use ng-repeat passing in the value of whatever you're iterating on to the ng-checked and from there utilising ng-class to apply your styles depending on the result.
I did something similar recently and it worked for me.
Can Declare As the in ng-init also getting true
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
<label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
<input type="button" ng-click="submit()" value="Submit" />
</body>
</html>
And You Can Select the First One and Object Also Shown here true,false,flase
The ng-model and ng-checked directives should not be used together
From the Docs:
ngChecked
Sets the checked attribute on the element, if the expression inside ngChecked is truthy.
Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.
— AngularJS ng-checked Directive API Reference
Instead set the desired initial value from the controller:
<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />
$scope.testModel = { item1: true };
You don't need ng-checked when you use ng-model. If you're performing CRUD on your HTML Form, just create a model for CREATE mode that is consistent with your EDIT mode during the data-binding:
CREATE Mode: Model with default values only
$scope.dataModel = {
isItemSelected: true,
isApproved: true,
somethingElse: "Your default value"
}
EDIT Mode: Model from database
$scope.dataModel = getFromDatabaseWithSameStructure()
Then whether EDIT or CREATE mode, you can consistently make use of your ng-model to sync with your database.
I had this issue while i am working with the angular js migration from 1.2 to 1.3.
The input type checkbox was not triggered if it was initiated from controller as well as the ng change event also not triggered. I tried with all types since ng model along with ng checked wont work.
Then ended with simple thing it worked for me like removing the ng change event by replacing with ng click.
The code is trying to set a checked property through jquery .prop function.
But ng-model is still blank.
$('document').ready(function(){
$("#mybutton").on('click',function(){
$("#mycheckbox").prop('checked',true);
});
});
<input type="button" id="mybutton" value="click">
<input type="checkbox" id="mycheckbox" name="one" ng-model="arr[1]" value="1" />
{{arr}} -- is blank when checked with jquery and not blank when manually checked.
When i manually check the checkbox then ng-model is binded and its value is set.
Can you please help how to update ng-model when checkbox is checked with jQuery.
You should read, when angular rechecks binded property like ng model and when digest runs.
Wrap your function with $scope.$applyAsync() method like this:
$scope.$applyAsync($("#mycheckbox").prop('checked',true));
this should be done inside the controller.
If you want no do in scopeless path you can use $timeout.
And once more. All dom manipulation should be done inside directives/components where you can access variuos angular tools like applyAsync and others.
I want to check/uncheck checkbox based on the value of the field services.Register.IsTest.
When services.Register.IsTest=True
My checkbox should be checked else not
my checkbox
<input type="checkbox" id="patReturned" value="Returned">
I am new to AngularJS. Please help.
Thanks
Your are looking for the ngChecked directive from AngularJS
Sets the checked attribute on the element, if the expression inside ngChecked is truthy.
Use it like this
<input type="checkbox" id="patReturned" value="Returned" ng-checked="services.Register.IsTest">
Try this
<input type="checkbox" ng-checked="services.Register.IsTest == true" ng-model="services.Register.IsTest" ng-true-value="true" ng-false-value="false">
Just add ng-model directive if you need two-way binding (i.e. services.Register.IsTest will be updated when the checkbox is checked or unchecked):
<input type="checkbox" id="patReturned" value="Returned" ng-model="services.Register.IsTest">
Make sure services.Register.IsTest is a part of the relevant scope.
Besides that, you can use ng-checked directive to avoid changing services.Register.IsTest:
<input type="checkbox" id="patReturned" value="Returned" ng-checked="services.Register.IsTest">
Is there any way to use an object for ng-value of a radio button?
Imagine you have a radio button whose ng-model is an object, like this:
modelObject: {val:'', text:''}
And this would be the radio button:
<input type="radio" ng-model="data.modelObject" ng-value=""/>
Is there a way to do something like the following (obviously it doesn't work)
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
?
Thanks
I know I can use the ng-change directive. I'm just wondering if what I am asking it's possible, it would be very smart
EDIT:
as requested in the comments, I am giving a bit of extra info on my setup.
I want to save in the model both the value of the button and its label. So let's say I have an array in my controller called impactOptions and a ng-repeat directive to create the buttons:
<div ng-repeat="option in impactOptions" >
<input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/>
<label for="rbGroup{{option.id}}">{{option.text}}</label>
</div>
The problem with this setup is that in that way I'm only saving the value of the button, while I would like to also save it's label. I really need it later.
I'm looking for a way to do something like this
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
You can have an object as the value in ng-value:
<div ng-app>
<input type="radio" ng-model="modelObject" ng-value="{val:1, text:'text'}"/>
<p>>{{modelObject|json}}<</p>
</div>
example fiddle
The values in ng-value can also be dynamic as well per request:
<div ng-app ng-init="opt={id: 1, text: 'some text'}">
<input type="radio" ng-model="modelObject" ng-value="{val:opt.id, text:opt.text}"/>
<p>>{{modelObject|json}}<</p>
</div>
updated example fiddle
You can use ng-value="option":
<input type="radio" model="data.modelObject" ng-value="option"/>
When you need id you can have it from $scope.option.id and when you need text you can access it from $scope.option.text. Check my answer here. Does this work for your case?
I have a model returning in the storeLocations object with a isDefault value. if isDefault returns true, I wan't to set that radio button in the group as checked.
Not sure if I need to do a $each(data, function(index,value) and iterate through each object returned or if there's an easier way to do this using angular constructs.
Object:
storeLocations = [
{
... more values,
isDefault: true
}
]
Markup:
<tr ng-repeat="location in merchant.storeLocations">
<td>{{location.name}}</td>
<td>{{location.address.address1}}</td>
<td>{{location.address.address2}}</td>
<td>{{location.address.city}}</td>
<td>{{location.address.stateProvince}}</td>
<td>{{location.address.postalCode}}</td>
<td>{{location.address.country}}</td>
<td>{{location.website}}</td>
<td>{{location.zone}}</td>
<td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>
Use ng-value instead of value.
ng-value="true"
Version with ng-checked is worse because of the code duplication.
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same value and ng-model, is checked automatically.
<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">
If the value of myRating is "2" then second radio button is selected.
One way that I see more powerful and avoid having a isDefault in all the models is by using the ng-attributes ng-model, ng-value and ng-checked.
ng-model: binds the value to your model.
ng-value: the value to pass to the ng-model binding.
ng-checked: value or expression that is evaluated. Useful for radio-button and check-boxes.
Example of use:
In the following example, I have my model and a list of languages that my site supports. To display the different languages supported and updating the model with the selecting language we can do it in this way.
<!-- Radio -->
<div ng-repeat="language in languages">
<div>
<label>
<input ng-model="site.lang"
ng-value="language"
ng-checked="(site.lang == language)"
name="localizationOptions"
type="radio">
<span> {{language}} </span>
</label>
</div>
</div>
<!-- end of Radio -->
Our model site.lang will get a language value whenever the expression under evaluation (site.lang == language) is true. This will allow you to sync it with server easily since your model already has the change.
Ended up just using the built-in angular attribute ng-checked="model"
As discussed somewhat in the question comments, this is one way you could do it:
When you first retrieve the data, loop through all locations and set storeDefault to the store that is currently the default.
In the markup: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
Before you save the data, loop through all the merchant.storeLocations and set isDefault to false except for the store where location.id compares equal to storeDefault.
The above assumes that each location has a field (e.g., id) that holds a unique value.
Note that $parent.storeDefault is used because ng-repeat creates a child scope, and we want to manipulate the storeDefault parameter on the parent scope.
Fiddle.
Just do something like this,<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>