i am using iCheck in an angular application, i have a basic checkbox when checked shows an image. this works perfectly with ng-show, however when i set the value to true within my controller it doesn't return checked when page is loaded.
Controller
$scope.basicIntake = {};
$scope.basicIntake.insurance_cover = true;
html
<div class="row">
<div class="form-group col-lg-6">
<div class="col-lg-12">
<label>
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
click to see image
</label>
</div>
</div>
<div class="form-group col-lg-6">
<div class="col-lg-12">
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" class="img-responsive img-thumbnail" ng-show="basicIntake.insurance_cover">
</div>
</div>
</div>
This is because your template is not bound to any controller with directive ng-controller.
Your properties are not created till you make any event. like : click.
See this attached fiddle and try to connect.
try to remove ng-controller from top Div to get your problem.
Further: there is no need to have ng-checked, when you already have ng-model
Change:
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
to:
<input icheck type="checkbox" ng-checked="basicIntake.insurance_cover" ng-model="basicIntake.insurance_cover" ng-click="checkAll()">
And it will work.
(Miguel Lattuada also suggested it in a comment to your question)
Related
My requirement is when I clicked on start button one of the Div content must be changed to "in Progress" and the value="start" must changed to value="Complete", now when I click on "complete button" the div content must changed to Completed and this complete button must be hidden.
I can achieved some of the requirement by Jquery, but I want to implement it by Angular JS. First of all I should know How can I read button value="start" in controller of angular Js. Below is my code.
<div class="row" style="margin:0% 20% 2% 10%;">
<div class="col-lg-2 col-sm-12 text-center">
18/5/2015
</div>
<div class="col-lg-2 col-sm-12 text-center">
eureQa
</div>
<div class="col-lg-2 col-sm-12 text-center">
Int-1
</div>
<div class="col-lg-2 col-sm-12 text-center" id="status">
Pending
</div>
<div class="col-lg-2 col-sm-12 text-center">
</div>
<div class="col-lg-1 col-sm-12 text-center" >
</div>
</div>
Use ng-click to set a scope variable or fire a controller function which sets a scope variable that is watched by ng-show. ng-show and ng-hide are responsible for showing/hiding dom elements.
$scope.buttonName = 'start';
onload Declare a value for button and in trigger change value for the
{{buttonName}}
$scope.buttonName = 'tempName';
You don't need to set the value at all. ng-model takes care of it,
Add $scope.value and replace value when you required
I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:
<li>
<div class = "new-student">
<img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
<!-- Block A -->
<div id="grid" class="ui-grid-a ui-mini">
<div class="ui-block-a ui-mini">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="name-student">Name</h2>
<p class="attendingtime-student">00:00</p>
</div>
</div>
<!-- Block B -->
<div class="ui-block-b">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="pickuptype-student">null</h2>
<p class="pickuptime-student">00:00</p>
</div>
</div>
</div>
<form>
<!-- Attending -->
<fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
<input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">1</label>
<input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
<label for="checkbox-h-2b">2</label>
<input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
<label for="checkbox-h-2c">3</label>
</fieldset>
</form>
</div>
However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:
I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).
Please help!
Regarding this:
I've tried calling ".checkboxradio.('refresh')" but it only results in
an error (saying I can't call that method on a component that has yet
to be initialized).
Usually when this kind of error occurs you need to do this:
$('#someId').checkboxradio.().checkboxradio.('refresh');
First call will initialize checkboxradio widget and second one will enhance its markup.
But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:
$('[type="checkbox"]').checkboxradio();
Without refresh parameter.
And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/
There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).
If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:
$('.ui-content').enhanceWithin();
Read more about it here.
There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.
Here I have a form in modal window and it looks like this:
Here you can see that input fields are really small...
Also the same code but not in modal widnow: http://jsbin.com/OJAnaji/37/edit
Works fine.
What is the problem here?
Why can't I show the form like on my example without modal window?
How can I solve it?
I tried to remove div class=col-md-4, but again it doesn't work.
generated html is like this.
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext"></label>
<div class="col-md-2">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="Ar" type="text">
<span class="input-group-addon">Ar</span>
</div>
</div>
</div>
try to change col-md-2 to col-md-4 or just remove it
I'm using the excellent jQuery color picker from http://colpick.com/plugin
It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.
This works:
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick1" class="colorPick"/>
</div>
</div>
</div>
But the same thing inside a Bootstrap modal fails to show the picker:
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick2" class="colorPick"/>
</div>
</div>
</div>
Is there a way to use this color picker within a Bootstrap modal?
Thanks
The problem is z-index just add this line in your css class it works good..
.colpick {
z-index: 9999;
}
Jsfiddle DEMO
I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});