I have a form with about 100 questions, each with a radio and some checkboxes, so I need the user to be able to save the form and load it later. I need also to check which ones the user changed in this session.
This question solves the problem: How can I denote which input fields have changed in AngularJS
The second answer (storing the old and current values of the model and comparing both) does it. However, if I wanted to go with the $pristine solution I have a problem. Unchecking a ng-checked box does not change it's $pristine value. The $pristine value becomes false only by checking the box again after the uncheck.
I know I'm not suposed to use ng-model with ng-check but I get the answers from the server in values of either 1 or 0. This values used as model do not check the checkboxes.
ng-model="question.answer" //will not check the box
ng-check="question.answer" //does check the box
Value comes as 1 from the server. Unchecking and checking the box changes it to 'true'
<input ng-model="question.answer" ng-checked="question.answer"
type="checkbox" name="{{'answer' + question.id}}"/>
Heres a plnkr: http://plnkr.co/edit/3xcI0Yq9WPZ1IxJJjKGt?p=preview
What you need is to set 1 and 0 to be considered as true and false values respectively. You can use ng-true-value and ng-false-value to have that set up. You dont have to deal with converting 1/0 to true/false and also can get rid of ng-checked and use ng-model itself effectively.
<input ng-model="question.answer"
ng-true-value="1"
ng-false-value="0" type="checkbox" name="{{'answer' + question.id}}" />
Plnkr
Related
I have the following angular 1.x checkbox:
<input
type="checkbox"
name="fooName"
id="fooId"
ng-model="false"
>
Suppose I do the following in jQuery:
$("#fooId").val()
I always get "on". This is the same result I get from webdriver io.
To reiterate my question:
How do I get the value from a checkbox input?
If there is no way to extract that, is there any other way to validate this from selenium or webdriver io??
For HTML Chekbox, we should check it checked/unchecked status, rather than its value. Its value never change no matter it checked or unchecked.
For example
<input type="checkbox" name="aa" value="true">, $("#fooId").val() will always return "true" no matter you check it or not.
If the check has no attribute value, like <input type="checkbox" name="aa">, you will always get "on" when call $("#fooId").val()
We should check its check status as following:
driver.findElement(By.css('#fooId')).isSelected();
I have a simple select input field where the user can choose an option:
<select class="form-control" id="calc-masterbatchCode"
ng-options="masterbatch as masterbatch.code for masterbatch in masterbatches"
ng-model="$parent.materialTAB.selectedMasterbatch">
</select>
as you can see the selectedMasterbatchobject is stored in a parent controller.
Then i have a disabled input field in the order to show the property of the selectedMasterBatch:
<input type="text" class="form-control" id="calc-masterbatchPercentage"
ng-model="$parent.materialTAB.selectedMasterbatch.percentage"
ng-change="onMasterbPercentageChange()">
It works, but the problem is the ngChangedirective:
because it doesn't fire the onMasterbPercentageChange function when the user select another masterbatch.
The only way to fire that function is to type something manually into the calc-masterbatchParcentageinput field.
My goal is:
the user select a masterbatch, then he can see the masterbatch's property (the percentage) into the disabled input field and, when this one change, the onMasterbPercentageChangefunction is fired.
ngChange directive doesn't work on disable/readonly inputs, because it's only evaluated when a change in the input value causes a new value to be committed to the model. So, since you're changing the value programmatically and not typing anything to this model, it doesn't calls ngChange
Here is more one part extracted from docs:
ngChange will not be evaluated:
if the value returned from the $parsers transformation pipeline has not changed
if the input has continued to be invalid since the model will stay null
if the model is changed programmatically and not by a change to the input value
So, to achieve what you want you must move your ng-change to your <select>.
I hope it helps.
I am new to Angular JS and working on creating a table where dynamic rows can be added. The new row contains a checkbox which should default to selected (value=Y). For existing data it should show what comes up from DB (Y or N)
<input type="checkbox" ng-model="safetyCheck.needed"
value="{{safetyCheck.needed}}" />
I tried adding ng-checked="safetyCheck==Y" and set $safetyCheck:Y when pushing a new blank row. But this always results in Y even if users unselects the component. how can i fix this.
For specific check\uncheck values use ng-true-value & ng-false-value arguments:
<input type="checkbox"
ng-model="safetyCheck.needed"
ng-true-value="'Y'"
ng-false-value="'N'"/>
ng-checked should not be used together with ng-model. Instead just initialize the variable to true preferably in the controller or wherever you are adding the rows. (Or even in an ng-init as follows)
<input type="checkbox"
ng-model="safetyCheck.needed"
ng-init="safetyCheck.needed=true"/>
I have a checkbox which has to be checked only if a property is false. I have the next html:
<input type="checkbox" ng-model="list.IsProject" ng-checked="list.IsProject==false" name="IsProject" id="IsProject" ng-change="saveItem(list, 'IsProject')"> Not Shared
After checking/unchecking I need to update the database and this has not the expected behaviour. Basically, if IsProject is false, it has to be checked. If gets unchecked, the IsProject value has to become 1.
I solved the issue so I'll post here the solution. As I didn't want to modify the model, I used another variable (somehow as David suggested) named NotShared and pass it to the ng-model and then as a parameter to the function from ng-change. I tried without passing it as a parameter but the value was not updating properly. Still don't know why.
<input type="checkbox" ng-model="NotShared" name="IsProject" id="IsProject" ng-change="saveItem(list, 'IsProject', NotShared)"> Not Shared
I think you will have to use two different properties for this...
So change this ng-model="list.IsProject" ng-checked="list.IsProject==false" to something like this
ng-model="list.IsProject" ng-checked="list.IsProject_2==false"
<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
ng-true-value="true"
ng-required="formData.acknowledge !='true'"/>
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge !='true'">
Please acknowledge that the information is correct</div>
I feel that something is wrong here with ng-required. Without required or ng- required it works fine. It returns the error message if I don't check the checkbox. But there also a problem: although I check the checkbox, form.$valid = false. That's why I tried using required or ng-required. You may asked me to remove the ng-true-value and use required. I know that also working. But the problem is I load formData.acknowledge = "true" inside my controller, so when the page loads the checkbox has to be checked. So I had to use ng-true-value. Can any one help me?
To restate, you want to show a message when the checkbox acknowledge is not checked by checking the $valid state of the form or the checkbox.
Also, the checkbox should be checked from the controller when assigned "true" - string value, rather than true - boolean value.
You are correct that you need to use ng-true-value to redefine the value given to the model for a checked state. You are using ng-true-value incorrectly, however, because you are not assigning the string value, but rather the boolean.
The correct way is below (notice the double-quotes "' '"):
<input type="checkbox" name="foo"
ng-model="foo" ng-true-value="'true'" required>
In the controller you could assign to "true":
$scope.foo = "true";
plunker
Also, you don't need to use ng-required with an expression - this would make the control required on a conditional basis, and I think you want it to be always "required".
General Pattern
You should be getting any data bindings you need from your controller. If necessary, those pieces of data should come from a service you inject or depend on. It sounds like you're roughly following that.
ng-true-value
You should only need to use ng-true-value if you want something other than true or false, as that is the default behavior.
what's probably wrong
In your controller, you should probably just be defaulting your property to true if that's what you need.
informationAcknowledgeOnlineRegistrationChange = true; // replace value you get from your service
should do everything you need.
As you have answer yourself, you can remove the ng-true-value and use the required:
<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
required />
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge">
Please acknowledge that the information is correct</div>
In the controller, the data binding would be:
formData.acknowledge = true; //not 'true' as string
when you don't check the check box no value is provided which goes against ng-required . here what you can do is to set a default value for for the check box when user doesn't provide any value for the checkbox