I'm using the Bootstrap Toggle plugin to change my checkboxes into toggle switches. I'm also using AngularJS. When I set the checked value, it toggles fine. But when I don't, it does not toggle. You can see in the link to my results, that checkboxes are checked, but they are not toggling. Does anyone know why it's not binding using Angular?
HTML:
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Working Toggle </span>
</label>
<div class="col-sm-5">
<input id="toggle-one" checked type="checkbox">
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Color Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Type Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="typeReview">
</div>
</div>
<div class="form-group">
<label for=color-review" class="col-sm-7 control-label">
<span>Color Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="color-review" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label for="type-review" class="col-sm-7 control-label">
<span>Type Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="type-review" class="pull-right" ng-model="typeReview">
</div>
Javascript:
// Set The Review Checkboxes To Toggle Switches
$('#color-review').bootstrapToggle();
$('#type-review').bootstrapToggle();
$('#toggle-one').bootstrapToggle();
Results: Here is a link to a picture of my results:
Results
Have you taken a look at https://github.com/cgarvis/angular-toggle-switch?
$scope.topics:[{"on":true,"offLabel":"Off","onLabel":"On"}];
<div ng-repeat="t in topics">
<toggle-switch model="t.switch.on" on-label="t.switch.onLabel" off-label="t.switch.offLabel" switched="doSomethingToggle(t, $index)"></toggle-switch>
</div>
Related
I have two radio buttons and one Bootstrap-select Dropdown.I want to enable/disable dropdown using javascript with the help of two radio buttons.
My Html Code is Given Below:
<div class="container" style="margin-top: 5px;background-color: wheat;">
<div class="card" style="background-color: white;margin: 1em">
<!--<div class="card-header"></div>-->
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em">Type</label>
</div>
<div class="row" >
<div class="col-sm-1">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeNew" value="enable" >New
</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeVisisting" value="disable">Visiting
</label>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em" for="selectCustomer" >Customer Name</label>
</div>
<div class="col-lg-10">
<div class="form-group" style="margin-top: .5em;margin-right: 1em">
<select class=" form-control input-lg" data-live-search="true" title="-- Select a Customer --" name="selectCustomer" id="selectCustomer" >
<!--<option value="none">-- Select a Customer --</option>-->
#foreach($customers as $customer)
<option value="{{$customer->customer_id}}">{{$customer->customer_id}} {{$customer->customer_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this problem.I am working at this upto three days.
Add the jquery below
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').removeAttr('disabled')
}
if(this.value == "disable"){
$('#selectCustomer').attr('disabled','true')
}
})
Try this in your javascript tag using jquery
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').prop('disabled',false)
}
if(this.value == "disable"){
$('#selectCustomer').prop('disabled','true')
}
})
I have just began working in angular after months of working on VueJs. I am facing a confusing problem here.
<div class="form-group">
<label class="col-sm-3 control-label">ABS</label>
<div class="col-sm-6">
<input type="text" ng-model="absTarget" class="form-control" placeholder="Set Target" />
</div>
</div>
<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1" />
</div>
<br />
<div class="form-group">
<label class="col-sm-3 control-label">Seven Star</label>
<div class="col-sm-6">
<input type="text" ng-model="ssTarget" class="form-control" placeholder="Set Target" />
</div>
</div>
<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="ssLocation" checkboxes="true" extra-settings="setting1" />
</div>
<div class="form-group">
<label class="col-sm-3 control-label">DEN</label>
<div class="col-sm-6">
<input type="text" ng-model="denTarget" class="form-control" placeholder="Set Target" />
</div>
</div>
<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="denLocation" checkboxes="true" extra-settings="setting1" />
</div>
This is my selected task object :
{"name":"SMS report","location":false}
So basically I have to show the 2nd,4th and 6th elements only when SelectedTask.location is true.
The problem is whenever SelectedTask.location equals false, then only 1st div element is visible, rest all becomes hidden
Self-closing <div> tag may not be supported by your parser. See here.
So the inner div of the first element isn't closed where you think it does. Which leaves the first element's outer div applied to all the following elements. Quick solution would be manually close all the inner divs.
<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1"></div>
</div>
<br />
I have 5 or so fields that will be hidden or shown based on the value of a drop down list; however, if they are visible, I need them to be required.
Is there a way to dynamically turn on/off unobtrusive validation for these fields?
Here is some code:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Routing Number</label>
<div class="col-md-8">
<input id="RoutingNumber" asp-for="org.RoutingNumber" class="form-control " autocomplete="off" />
<span asp-validation-for="org.RoutingNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-3 control-label">Account Holder Name</label>
<div class="col-md-9">
<input id="AccountHolderName" asp-for="org.AccountHolderName" class="form-control " autocomplete="off" />
<span asp-validation-for="org.AccountHolderName" class="text-danger"></span>
</div>
</div>
</div>
</div>
I would need these fields to be required, ONLY IF a separate drop down list had a certain value
i'm traying to display n filds through ngFor directive(user imput) that correspand to a User instance But my question is what is the best way to put this object values in this array after validation click buttom.
<ul style="list-style-type: none">
<li *ngFor="let number of nbCollaborateur">
<div class="row" >
<div class="col-md-3">
<label class="control-label">Nom et prenom </label>
<input type="text" class="form-control">
<div class="col-md-3">
<div class="form-group form-black label-floating is-empty">
<label class="control-label">telephone</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group form-black label-floating is-empty">
<label class="control-label">adresse</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group form-black label-floating is-empty">
<label class="control-label">commantaire</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</li>
</ul>
My array will look like this:
users: User[];
this.users.push(new User());
I am not seeing any button in your html. But you can handle validation logic in component and then push to array.
If you add a new item to array, it automatically will get added to the template as you have *ngFor loop.
Here are some useful links for your use case:
https://www.youtube.com/watch?v=xYv9lsrV0s4&t=804s
https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2
https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html
How can I cause the return key on the iPad's keyboard to behave as the tab key when in an HTML form?
My current solution is this:
$('input[type=text]').keydown(function(e)
{
if (e.keyCode == 13)
{
e.preventDefault();
$(this).nextAll('input[type=text]:first').focus();
}
});
I found this solution in the link below, which works in the JSFiddle included in the comments of the answer.
jQuery how to make Enter (Return) act as Tab key through input text fields but in the end trigger the submit button
This solution is not working in my case though (on iPad or PC). Based on the comments, I think it might be my HTML structure that is causing trouble though I am not sure how I could alter it to achieve the same layout.
How else can I cause the return key to jump to the next input field?
My form's HTML block is below (skip to avoid long HTML read):
<div class="row">
<div class="span6">
<div class="control-group" id="GuestName_group">
<label class="control-label" for="textbox_Name"><i class="icon-user"></i> Guest Name</label>
<div class="controls controls-row">
<input type="text" class="span6" id="textbox_Name" data-provide="typeahead" placeholder="Lastname, Firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label>
<div class="controls controls-row">
<input type="text" class="span6" id="textbox_Group" placeholder="Organization">
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label" for="select_Host"><i class="icon-star"></i> AOELab Host Name</label>
<div class="controls controls-row">
<select class="span6" id="select_Host">
{% for person in host_names %}
<option value="{{ person.bems }}">{{ person.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea_Purpose"><i class="icon-question-sign"></i> Purpose</label>
<div class="controls controls-row">
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose1" value="meeting" checked>
Meeting
</label>
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose2" value="tour">
Tour
</label>
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose3" value="other">
Other...
</label>
</div>
<div class="controls controls-row">
<textarea class="span6" id="textarea_Purpose" placeholder="Why are you here?"></textarea>
</div>
</div>
</div>
</div>
$('input[type=text]').on('keydown', function (e) {
if (e.which == 13) {
var tabables = $("*[tabindex != '-1']:visible"),
index = tabables.index(this);
tabables.eq(index + 1).focus();
e.preventDefault();
}
});
FIDDLE