I am trying to change the add a class "isChecked" to the parent div whenever a checkbox is checked. For that I am trying to use ngClass directive.
HTML
<div ng-class="{isChecked: (isChecked_1 == 'true')}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
CSS
.isChecked{
background-color: #428bca;
color: white;
}
But this isn't working. Can someone point out my mistake or suggest some better method.
When the user checks a checkbox angularJS sets the model to the boolean value true. In your code you compare this to the string 'true' which evaluates to false. Thus, you have to compare it to the boolean true. This is different from if statements where the string 'true' evaluates to true.
Moreover you don't need the manual comparision at all, as it's only purpose is to yield a boolean value. You can change your code to:
<div ng-class="{isChecked: isChecked_1}">
<input type="checkbox" id="check_1" ng-model="isChecked_1"/>
<label class="label_1" for="check_1">This is a label</label>
</div>
Solved it.
By changing the 'true' to just true , it worked.
So the new code is:
<div ng-class="{isChecked: (isChecked_1 == true)}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
Anyone has idea what us is the difference between variable == 'true' and variable == true ?
You can use jquery for it. it has methods to add and remove css classes depending upon certain conditions
Related
When I implemented my html template, checked property of checkbox is not properly working.
My html file contains code like the following,
<div *ngIf="userPermissionObj" >
<label for="pm">Permissions:</label>
<div *ngFor="let pt of permissionType">
<label>
<input type="checkbox"
[value]="pt.id"
ng-checked="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" />
{{pt.name}}
</label>
</div>
How can I find out where I implemented in wrong way?
In new Angular ng-checked does not exists. To acheive the same, use [checked]:
<input type="checkbox" [checked]="'Your_condition_here' ? true : false" (change)="someMethod()"/>
Use [checked] instead of ng-checked (It is angularJS directive, not angular.io),
See example below,
<input type="checkbox"
[value]="pt.id"
[checked]="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" >
how can i validate the ngModel value. i want to check the value is type number or not. if it has fraction numbers then i have to round up the value to the nearest whole number.so is there any way to include validation in html and where i can add Math.round().
<div style="display: flex; margin-top: -3px; color: black;" class="dist" *ngIf="travel">
<label><span>Distance</span> <input type="number" value="0" [(ngModel)]="travel.distance" />km</label>
</div>
Solution
<label><span>Distance</span> <input type="number" value="0" [(ngModel)]="travel.distance" (change)="call()" />km</label>
call(){
travel.distance = Math.round(travel.distance);
}
Ps: Have updated my solution now i am getting the result which i am expecting. please check. is this the best way to do this or any other solution?
you can use addEventListener for get value of input with js and if use angular, you can use (keydown.enter) and like this events for get value
I have below code in AngularJS
<div >
<input type="checkbox" ng-model="vehicleDetails.selfOwned"> Owned
</div>
<div>
{{vehicleDetails.selfOwned}}
</div>
Here selfOwned is my model value which is coming true when printed using
{{vehicleDetails.selfOwned}}
but still checkbox does not come up with checked, even when model is printing true value.
Try something like:
<div>
<input type="checkbox" ng-model="vehicleDetails.selfOwned" ng-checked="vehicleDetails.selfOwned" ng-click="toggleSelection(value)"> Owned
</div>
<div>
{{vehicleDetails.selfOwned}}
</div>
In your controller you'll have:
$scope.toggleSelection(value){
vehicleDetails.selfOwned = !vehicleDetails.selfOwned;
}
I have this input button: image
The code of input:
<div class="media">
<label class="col-form-label m-r-10">Status Of System</label>
<div class="media-body text-right icon-state">
<label class="switch">
<input
type="checkbox"
name="status"
value="{{ setting()->status == '1' ? 0 : 1 }}"
>
<span class="switch-state bg-primary"></span>
</label>
the setting()->status is helper function:
if (! function_exists('setting') ) {
function setting(){
return \App\Setting::first();
}
}
And in the column(status), the default is 1.
The problem is when I try to switch between 1 and 0. Notice value attribute in input I try to say if the column in database 1 put 0 else put 1 to switch the value, but this way does not run find! How can do something like this :(
If I correctly understand your question, try like that:
Check checkbox according setting value:
<input
type="checkbox"
name="status"
#if(1 === setting()->status) checked #endif
>
Here you retrieved status from database. If it exists and exactly equals 1, checkbox will be checked. If not - unchecked.
Next you want to change database value according this checkbox checked state.
Checkbox field appears in $request only if checkbox checked. So, try to refactor a bit your controller:
$setting = \App\Setting::first(); // your setting
$setting->status = isset($request->status) ? 1 : 0; // if status exists in request, it means that checkbox was checked
$setting->save(); // update your database row
The problem is just one:
when a checkbox isn't checked, it's value isn't inserted in the request. So you have to check before the update if that checkbox value exist.
So instead of
setting()->update($request->all());
you have to do
$params = $request->all();
if(!isset($params['status'])) $params['status'] = 1;
setting()->update($params);
Also on the internet there is another solution, which is to add a hidden input with the same name and with the value that you want if that checkbox isn't checked like this:
<input type="hidden" name="status" value="1">
But in my opinion, it's just a dirty workaround... but you can have a try
Is it possible to have a single checkbox with two values ? i have a checkbox called "full-day ?".
<div class="input-field col s2">
<p>
<input type="checkbox" id="test6" value="yes" ng-model="isFull"/>
<label for="test6">Half Day</label>
</p>
</div>
if the user checks it a yes should be passed when i press submit button and if the checkbox is not checked a no have to be passed.As far as i know if the checkbox is not activated html treats as if checkbox is not present and it wont be included in the query string.Here using radio button is not an option.Please let me know how do i go about it.
This is simple:
<input type="hidden" id="test6" value="no" ng-model="isFull" checked>
<input type="checkbox" id="test6" value="yes" ng-model="isFull">
<label for="test6">Half Day</label>
It is boolean.
Code is processed sequentially
Only the last 'checked' answer is used.
Therefore put the 'non' answer first but hide it and leave it always checked. The positive answer comes second.
If the form is editable (user can come back and change their answer) code to check the single visible checkbox appropriately e.g.
<?php if ($fieldValue=='Yes' ){ echo 'checked'; } ?>
Works for me!
Not really.
You can fake things with JavaScript that injects hidden inputs, but this is better handled with server side code.
e.g.
my $value;
if ($request->param("checkbox_name") {
$value = "yes";
} else {
$value = "no";
}