I have a variable that is either 1 or 0 called {{CurrentItem.STATUS}}
How do I make the checkbox checked/unchecked depending on the value of {{CurrentItem.STATUS}}. 1 = Checked & 2 = Unchecked. I would prefer an Angular solution that doesn't need any javascript/typescript.
Something like this would be perfect:
<input type="checkbox" checked="{{CurrentItem.STATUS}} == 1">
You can use two-way data binding with ngModel
<input type="checkbox" [(ngModel)]="CurrentItem.STATUS">
This will work as 0 is considered Falsy in JS
This works:
<input type="checkbox" [checked]="CurrentItem.STATUS == 1">
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" >
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
I was wondering if it was possible to style an element using ngModelChange. I tried the following but that doesn't work
<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color]='#dbdbdb'" type="number">
I know that I could do something like
<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? error=true : error=false" type="number" [style.border-color]="error ? '#ff4d4d' : '#dbdbdb'">
But I want to remove if possible the 'error' attribute and assign directly the style to the input depending of the condition
Instead of handling ngModelChange, you could use normal style binding with the condition on counter, which has the same value as the $event parameter of ngModelChange:
<input [(ngModel)]="counter" [style.border-color]="counter > 2 ? '#ff4d4d' : '#dbdbdb'" class="input" type="number">
See this stackblitz for a demo.
I don't think that will be possible as we can't do property binding [style] inside an event binding (ngModelChange) as one is happening at the view and another at Model.
You can clean your code by adding function based approach.
HTML
<input class="input" [(ngModel)]="counter" (ngModelChange)="changeColor($event)" type="number" [style.border-color]="color" type="number">
.TS
color="dbdbdb";
changeColor(event) {
if(event > 2){
this.color = "#ff4d4d";
}else{
this.color = "#dbdbdb";
}
}
<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)
In AngularJS; How do I toggle between two checkboxes and get only one value
<td >
<input type="checkbox" value="{{person.person_ID}}">{{person.home_address}}
</td>
<td >
<input type="checkbox" value="{{person.person_ID}}">{{person.office_address}}
</td>
According to the requirement I have list of persons in that every person has two
columns home_address and office_address, I want to toggle between addresses and get only 1
value like if person.home_address is checked than office_address should be unchecked and vice versa, and I want to get only 1 address like "person.person_ID":home_address
You can use ng-model to bind to a value in your person instance using the following html. (A fiddle is available)
<input type="checkbox"
ng-model="person.option"
value="{{person.person_ID}}"
ng-true-value="'home'"
ng-false-value="'none'">{{person.home_address}}
<input type="checkbox"
ng-model="person.option"
value="{{person.person_ID}}"
ng-true-value="'office'"
ng-false-value="'none'">{{person.office_address}}
here the checkboxes binds to the same variable person.option which is set depending on the value of the checkbox to the expression in ng-true-value and ng-false-value. By setting these to the some value other than that of the other we can either select none, or only one.
In your controller you can simply check person.option to get what checkbox is selected.
if (person.option === 'home') { }
else if (person.option === 'office') { }