I've got a fairly basic settings page in my Ionic app, and the tab view looks like this:
<ion-view title="Settings">
<ion-content class="has-header">
<ul class="list">
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" value="37.5">
</label>
<label class="item item-input item-label">
<span class="input-label">Days per week</span>
<input type="text" value="5">
</label>
<label class="item item-input item-label">
<span class="input-label">Pension Contribution</span>
<input type="text">
</label>
<label class="item item-input item-select">
<div class="input-label">
Age
</div>
<select>
<option selected>Under 65</option>
<option>65-74</option>
<option>75+</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Weeks Option
</div>
<select>
<option selected>Weekly</option>
<option>2 Weeks</option>
<option>4 Weeks</option>
</select>
</label>
<li class="item item-toggle">
National Insurance
<label class="toggle toggle-positive">
<input type="checkbox" value="on">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Student Loan
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Registered Blind
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Married
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
</ion-content>
</ion-view>
What I want to do is to save the states of these elements (so if the user enters a different number of days per week or toggles a checkbox on/off or chooses an option from a dropdown list) to the local storage so that the next time the app is initiated, it will load these saved values.
I'm having a hard time finding any good information on how to do this in the Ionic docs and am new to Angular, so would appreciate any help on either a) how to go about this, or b) where I can find the information to learn how to do it.
Cheers!
Yo can inject Angular-local-storage in your controller as your dependency and then can have this code in your controller
$scope.hoursPerWeek = '';
$scope.submitClicked = function(){
localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
}
However first in your html you need to have two way binding with hoursPerWeek object.
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" ng-model="hoursPerWeek" value="37.5">
</label>
For each field you need to have a similar approach
Related
I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->
You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
I'm trying to do the following : When you click on "Add Package" its pushes to an array a package where I can specify e.g. Package one, but within that I want to push multiple items (products) "Add Item". The problem is when I create a new package it works, but the items in each package is the same so when I add more to either dynamic package the items within is the same. I assume that's because the array is the same each time, how to I track that by index?
HTML:
<div class="col-12 order-box" ng-repeat="orderpackage in orderproductspackages track by $index">
<div class="col-12">
<label for="name_{{$index}}">Package Name</label>
<input type="text" ng-model="orderpackage.orderpackagename" name="name_{{$index}}" required>
</div>
<div class="col-12" ng-repeat="ordercontent in orderproductscontents track by $index">
<div class="col-2">
<label for="name_{{$index}}">Product</label>
<select ng-model="ordercontent.ordercontentname" name="name_{{$index}}" ng-change="onProductChange(ordercontent.ordercontentname,$index)">
<option ng-repeat="product in productResponse | orderBy:'productname'" value="{{product.productname}}">{{product.productname}}</option>
</select>
</div>
<div class="col-2">
<label for="name_{{$index}}">Quantity</label>
<input type="text" ng-model="ordercontent.ordercontentquantity" name="name_{{$index}}" ng-keyup="onProductChange(ordercontent.ordercontentname,$index)" required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Price</label>
<input type="text" ng-model="ordercontent.ordercontentprice" name="name_{{$index}}" ng-change="onPriceChange(ordercontent.ordercontentname,$index)" disabled required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Per {{ordercontent.ordercontentmeasurement}}</label>
<input type="text" ng-model="ordercontent.ordercontentpriceper" name="name_{{$index}}" disabled required>
</div>
<div class="col-2">
<label for="name_{{$index}}">Total</label>
<input type="text" ng-model="ordercontent.ordercontenttotal" name="name_{{$index}}" required disabled>
</div>
<div class="col-2">
<label for="name_{{$index}}">Options</label>
<a class="button critical small" ng-click="removeOrderContent($index)"><span class="fa fa-minus"></span> Remove</a>
</div>
</div>
<div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderContent()">
<span class="fa fa-plus"></span> Add Item</a>
</div>
</div>
<div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderPackage()">
<span class="fa fa-plus"></span> Add Package</a>
</div>
CODE SNIPPETS :
_this.addOrderPackage = function() {
_this.orderproductspackages.push({ ordernumber:_this.order.ordernumber });
}
_this.addOrderContent = function() {
_this.orderproductscontents.push({
ordercontentname:'',
ordercontentquantity:'1',
ordercontentprice:'',
ordercontentpriceper:'',
ordercontenttotal:''
});
}
Of course, all items in your packages are the same, because you use the same content array inside packages: ng-repeat="ordercontent in orderproductscontents". If I understand you right, you need this array orderproductscontents to be distinctive in each package. To do this store this array in package object, like this:
_this.addOrderPackage = function() {
_this.orderproductspackages.push({
ordernumber: _this.order.ordernumber,
contents: []
});
}
and then just ng-repeat="ordercontent in orderpackage. contents"
I have the form with fields (name, tel, email, etc.)
<ion-content>
<div class="list">
<div class="row">
<div class="col" ng-hide="hideFild" id="nom">
<label class="item item-input item-floating-label">
<span class="input-label">Nom</span>
<input type="text" placeholder="Nom" ng-minlength="2" ng-maxlength="30" name="nom" ng-model="noteForm.nom">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Prenom</span>
<input type="text" ng-maxlength="20" placeholder="Prenom" ng-model="noteForm.prenom">
</label>
</div> ...
And I have another page where I control the visibility of fields:
template.html
<ion-view view-title=" Paramétrage formulaire">
<ion-content>
<ion-list>
<ion-item ng-repeat="fild in filds" class="item item-toggle">
{{fild.name}}
<label class="toggle toggle-balanced">
<input type="checkbox" ng-model="fild.value" ng-change="change(fild)">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
with controller.js for save a data in local storage.
Result in local storage:
Result $scope.noteForm:
How to hide form fields that have the value false in local storage?
Thank you all!!!
I can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.
This is the code that I entered into the javascript window belonging to the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";
});
I was wondering how the same could be achieved with jQuery?
I have successfully installed jQuery thanks to this handy guide by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
in the source view of the header. Additionally, I added var jq = jQuery.noConflict(); at the top of the javascript window belonging to this question.
By inspecting the source code further I found that the ID of the question is QID2. Based on this answer I therefore tried
$("#QID2 .ChoiceStructure ul li:eq(0)").hide();
but without success.
Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.
Edit: the html for the qualtrics question is:
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
You can use prototypejs (which Qualtrics already uses) to do it quite simply:
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).down('li').hide();
});
Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul).
So you need to use
$("#QID2 ul li:eq(0)")
or
$("#QID2 ul.ChoiceStructure li:eq(0)"
About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like
$("#QID"+variableWithQuestionNumber+" li:eq(0)")
(function(){
var counter = 0;
$(".myButton").click(function(e){
if (counter===0){
$("#QID2 ul li:eq(0)").hide();
counter++;
}else{
$("#QID2 ul li:eq(0)").show();
counter--;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div>
<div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg">
<input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection reg">
<input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span>
</label>
</span>
<div class="clear"></div>
</li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
<input type="button" class="myButton" value="Push me"/>
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>