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)
Related
I am trying to combine input text with HTTP get. I tried some methods it works but it' doesn't what I want. I have some URL like this http://localhost/web.php?tN=false&f5=kaka
in f5 get some data from input in HTML. This my HTML
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-user"></i> Username</span>
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-click="submitFunction()" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-lock"></i> Password</span>
<input id="inputPassword" class="form-control" placeholder=" Password" name="password" type="password" ng-model="loginData.password" required>
</label>
</div>
and this my controller
$scope.submitFunction = function() {
kaka.falselogin($scope.loginData.username).success(function(data) {
console.log(data);
});
};
My problem is that I must click after input in form username to get data. It's complicated if I must get data after input in form username
anyone has an idea ? Please help me to solve my problem. Thanks
You can just use the ng-change directive.
It'll run the provided function whenever the input`s value changed.
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-change="submitFunction()" required>
Considering you issue HTTP requests on each change, you'd basically flood the server.
To solve that issue you can debounce the model so that it takes x ms until the new value will be applied.
ng-model-options='{ debounce: 1000 }'
In combination it would look like this:
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-model-options='{ debounce: 1000 }' ng-change="submitFunction()" required>
There you go :)
HTML code
<form novalidate>
<div class="list">
<div class="list list-inset">
<label class="item item-input" id="descriptions">
<input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
</label>
<label input="email" class="item item-input" id="email" ng-model="email">
<span class="input-label">Email</span>
<input type="email">
</label>
<label class="item item-input" ng-model="date">
<span class="input-label">Date</span>
<input type="date">
</label>
</div>
<button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>
<button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
</div>
</form>
I want to have a function that takes the values of these input text fields and passes them in a <div> when the Add Task button is clicked.
So, you need to set up a click event handler for the button that copies the data. See comments inline below:
// Get references to DOM elements needed to solve problem:
var addTask = document.querySelector(".button-balanced");
var description = document.querySelector(".description");
var email = document.querySelector("[type=email]");
var date = document.querySelector("[type=date]");
// Set up click event handling function for button
addTask.addEventListener("click", function(){
// Create an new "row" for data
var div = document.createElement("div");
// populate the "row" with the values from the text fields
div.textContent = description.value + ", " + date.value + ", " + email.value;
// Add the row to the document
document.body.appendChild(div);
});
<form novalidate>
<div class="list">
<div class="list list-inset">
<label class="item item-input" id="descriptions">
<input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
</label>
<label input="email" class="item item-input" id="email" ng-model="email">
<span class="input-label">Email</span>
<input type="email">
</label>
<label class="item item-input" ng-model="date">
<span class="input-label">Date</span>
<input type="date">
</label>
</div>
<button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>
<button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
</div>
</form>
I believe your problem is the duplication of IDs:
<label id="email">
<input id="email">
</label>
That is invalid code as IDs have to be unique within the same document.
If you access the content of the <input> you will get undefined if you use the ID to access the element as the ID is taken by the label already.
Labels are associated using the for attribute:
<label for="email">
<input id="email">
</label>
This might fix it.
In case it does not, you can use plain JavaScript and the DOM:
<label for="email">Email: <input id="email"></label>
<label for="date">Date: <input id="date" type="date"></label>
<button id="add">Add</button>
<script>
document.getElementById("add").addEventListener('click', function() {
var div = document.createElement('div');
div.textContent = document.getElementById('email').value + ' on the ' + document.getElementById('date').value;
document.body.appendChild(div);
});
</script>
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.addNewGoal = function() {
alert($scope.goaltitle);
};
});
<ion-pane view-title="goal">
<ion-header-bar class="bar-positive">
<div class="buttons">
<a nav-transition="android" class="button button-icon icon ion-arrow-left-b" ng-click="" href="#/index"></a>
</div>
<h1 class="title">Add New Goal</h1>
</ion-header-bar>
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal"></textarea>
</label>
</div>
</ion-content>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">Add Goal</button>
</ion-tabs>
</ion-pane>
This is my code... I don't know how to explain but it always say undefined when I enter something on the text box...
but $scope.goaltitle = "something" is working on the .controller(); ...
Short Answer
The root cause of this issue is, ion-content does create a prototypically inherited child
scope, that's why goaltitle(primitive type) of controller scope is different than the goaltitle you are using on ng-model
Ideally practice is to follow dot rule while defining view model. So that prototypal inheritance rule will get followed with scope hierarchy.
You should define object and then do assign all the ng-model property in it.
Controller
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.model = {};
$scope.addNewGoal = function() {
alert($scope.model.goaltitle);
};
});
Then have goalTitle, Goal, etc. property in it.
Markup
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="model.goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal" ng-model="model.Goal"></textarea>
</label>
</div>
</ion-content>
I don't want to re-write whole explanation again, so here I'm referencing similar answer, where I've covered all detailed information.
For the html
<input type="text" placeholder="#Title" ng-model="foo.goaltitle">
JS:
$scope.foo = {{
goaltitle : ''
}}
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'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