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!!!
Related
I don't know the reason why, but at each of page of my webapp, at the left side upper there is a dot like this:
It's an html problem I think, in fact running the snippet below you can see that:
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
However, I put also the controller of this page:
.controller('SendFeedbackCtrl', function($scope, $stateParams, $ionicPopup, restService) {
var token = localStorage.getItem("token");
$scope.tknuser = JSON.parse(token);
$scope.logged = false;
$scope.feedbackform = {
message: "adad",
readfb: false,
user: {
iduser: -1
}
};
And also the class style used:
.ioncontentcatalog {
background-image: url('../img/background.png')
}
That's very strange and I don't know how to solve.
It is the li default style, add this CSS rule to remove it:
list-style
https://developer.mozilla.org/en/docs/Web/CSS/list-style
.ioncontentcatalog li{
list-style: none;
}
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
Just remove li decoration like this:
<li style="list-style-type: none;">
I'm using Ionic right now to develop a simple login page, but for some reason, the code for the header isn't working correctly - wrong alignment and font size - and neither is the code for input forms - they should be full width and when I used stacking labels exactly as any example out there, instead of the labels being on top of the input areas, they would be to the left of the input areas.
This is the code I'm using:
<script src="cordova.js"></script>
<div class="bar bar-header bar-light">
<h1 class="title">Login</h1>
</div>
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
This is the .scss ( which came with the example ):
.login {
}
This is how it looks for me:
You are missing the <ion-view></ion-view> in your html. It should be something like this in your case:
<ion-view view-title="Login" name="login-view">
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
</ion-view>
Im working on an App, and i want to push Data in an Array, but it doesnt work.
Maybe you can take a look at my code.
Error Message Thrown: ionic.bundle.js:25642 TypeError: Cannot read property 'title' of undefined
at Scope.$scope.createEx (app.js:63)
at Scope.$scope.createEx (app.js:62)
Index.html
<script id="templates/addEx.html" type="text/ng-template">
<ion-view view-title="GymHelper">
<ion-content padding="true" ng-controller="OverallCtrl">
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Exercise Title</span>
<input ng-model="exer.title" type="text" placeholder="Title">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Exercise Sets</span>
<input ng-model="exer.set" type="text" placeholder="Sets">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Exercise Reps</span>
<input ng-model="exer.rep" type="text" placeholder="Reps">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Extra Information</span>
<input ng-model"exer.inf" type="text" placeholder="Extra Information">
</label>
<label class="item item-input item-select">
<div class="input-label">
Muscle
</div>
<select ng-model="selOption">
<option>Chest</option>
<option>Biceps</option>
<option>Back</option>
<option>Stomach</option>
<option>Legs</option>
<option>Triceps</option>
<option>Shoulders</option>
<option>Traps</option>
</select>
</label>
</div>
<button class="button button-block button-positive" ng-click="createEx(exer)">
Create Exercise
</button>
</ion-content>
</ion-view>
</script>
App.js
app.controller('OverallCtrl', function($scope, $ionicListDelegate, $state) {
$scope.selOption == "Chest";
$scope.createEx = function(exer) {
if($scope.selOption == "Chest"){
$scope.chestEx.push({title: exer.title, sets: exer.set, reps: exer.rep, exInf: exer.inf});
console.log("Pushed to Chest Array.");
$state.go('chest')
};
}
$scope.chestEx = [
{title: "Crowls", sets: 3, reps: 15, exInf: "Make 5 minute pause between Sets."},
]
})
please position
$scope.chestEx = [
{title: "Crowls", sets: 3, reps: 15, exInf: "Make 5 minute pause between Sets."},
]
on top of $scope.createEx function
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>
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