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
Related
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 have a controller:
.controller("myController", function($scope){
$scope.name = "Test";
$scope.desc = "Hello World!";
$scope.create = function(){
var test = {name: $scope.name, desc: $scope.desc}
console.log(test);
}
}
and the template:
<label class="item item-input item-stacked-label">
<span class="input-label">{{primaryName}}</span>
<input type="text" placeholder="{{sampleName}} Name" value="{{name}}">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">{{primaryName}}</span>
<input type="text" placeholder="{{sampleName}} Name" value="{{desc}}">
</label>
<a ng-click="create()">Create Test</a>
It seems that when it runs, the input gets set to Test So i change it to what I want. Alpha and click Create. It will console.log out Test
I dont know if i am doing assignment correctly. I thought I was, but it seems to be otherwise.
What am i doing wrong?
Edit I also attempted to have the create function accept variables, and passed those in, still using the sample: Test/HelloWorld text strings.
<div ng-app="myApp" ng-controller="myCtrl">
<label class="item item-input item-stacked-label">
<span class="input-label">{{primaryName}}</span>
<input type="text" placeholder="{{sampleName}} Name" ng-model="name" >
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">{{primaryName}}</span>
<input type="text" placeholder="{{sampleName}} Name" ng-model="desc" >
</label>
<a ng-click="create()">Create Test</a>
</div>
You are not using ng-model , That's why (y)
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>
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