I have A form with several Items, including some check boxes that need to receive their status from the data service/ a model.
<div class="col">
<label for="expired">IsExpired</label>
<div>
<input type="checkbox" id="expired" disabled>
</div>
</div>
this is in the class of card.model.ts
expired: boolean;
and data.service.ts:
new CardModel('4',new Duration(2, 0), new LessonModel('#5DC878', 'Bialogy'), 'just the first part', false,true,new Date(2018,11,11,13,30),new Date(2018,11,11),true,false)
I have tried to put [(ngModel)] = "expired" into the input tag but I receive an error:
Can't bind to 'ngModel' since it isn't a known property of
'input'
what is the problem?
Try this:-
html
<div class ="col">
<label for="expired">IsExpired</label>
<div>
<input type="checkbox" id="expired" [checked]="checkedStatus">
<input type="checkbox" [(ngModel)]="checkedStatus" name="ele_name"/> <=== add name
</div>
</div>
ts
checkedStatus = true;
Related
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 a form and I want to set some default values to be shown inside it. I have tried the following code:
<h3>ِStart Time</h3>
<div class="row" >
<div class="col">
<label for="startTime">Hour(s) </label>
<input type="number" [ngModel]="defaultSTime" class="form-control" name="StartTimeHour" value="card.startTime.getHours" id="startTime" min="0" max="23">
</div>
<div class="col">
<label for="startTime">Minute(s) </label>
<input type="number" [ngModel]= "defaultSMinute" class="form-control" name="StartTimeMin" value="card.startTime.getMinutes" id="startTime" min="0"max="59"> <!--input type can be changed accordingly-->
</div>
</div>
defaultSTime = 'card.startTime.getHours' ;
defaultSMinute = 'card.startTime.getMinutes';
this is supposed to work but it only shows me the empty box. where is the problem?
Not sure if this is the issue but from your definition of defaultSTime and defaultSMinute, they are strings while your inputs are defined as number type.
If you're trying to get a number from card object card.startTime.getHours, change your definition to:
defaultSTime = card.startTime.getHours;
defaultSMinute = card.startTime.getMinutes;
This will help you :
[
Also, to make it two way binding, keep banana-in-a-box for ngModel, i.e :
[(ngModel)]= "defaultSMinute"
There, is not much clarity in your comments - how you are constructing Card object, but i believe you missed following:
getHours() ; // these are functions of date not properties
This is my HTML code. It's a custom DropDownList that I made. Can someone advise how I could set one of the options to be checked by default in this case below?
<div class="dropdownlistheader" ng-click="toggle('subdiv','item')">
<input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedItemValuesDisplay}}" />
</div>
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
Based on the limited details provided in the questions, I'll suggest the following:
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist" ng-init="selected[0] = true">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
The ngInit directive will select the first element in the selected flags list, by setting the first index of the array to true
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>
I have the following html
<div class="row">
<div class="col-lg-6">
<label class="radio">
<input type="checkbox">
</label>
</div>
<div class="col-lg-1">
<input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
</div>
</div>
there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it
$("#medication").on('click', ':checkbox', function(){
var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
//... change the value of $note
});
is my way is good? is there any better way to traverse to the input filed starting from the check box?
This looks like simpler:
$(this).closest('.row').find(':text')
Edit:
Here is the comparisons between closest and parents:
http://jsperf.com/jquery-parents-vs-closest