How to bind using the ng-model in angular js - javascript

I just started using angular js and I was playing with the ng-model directive but I can't figure out what im doing wrong. I want the input email value to show in the h1 tag as I'm typing. pretty much I'm not getting anything show in the h1 tag as I type.
<body ng-app="starter">
<ion-pane>
<ion-content style="margin-top: 163px">
<div ng-controller="loginController">
<form action="">
<div class="row">
<div class="col col-50 col-offset-25">
<div class="card">
<div class="item item-text-wrap">
<div class="list">
<label class="item item-input">
<i class="icon ion-email placeholder icon"></i><input type="email" placeholder="Email" ng-model="email" />
<h1>{{email}}</h1>
</label>
<label class="item item-input">
<i class="icon ion-locked placeholder-icon"></i><input type="text" placeholder="Password" />
</label>
<br/>
<button class="button button-full button-positive">Clock Me In</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</ion-content>
</ion-pane>
</body>
this is my javascript
var app = angular.module('starter', ['ionic'])
app.controller('loginController', function($scope)
{
})

Your changes are not displayed on screen because while you are typing the email it is invalid. Invalid values are reflected to $scope as null, so there is nothing to show.
As suggested in comments, you can change it type="text". Since you removed validation, you'll see the text on both screen and in your $scope, however you'll sacrifice validation.
If you still want to use email validation, and want to see it in screen/$scope you can use ng-model-options as described here.
Using ng-model-options you can allow invalid values to be stored in your $scope.
Try adding ng-model-options="{allowInvalid: true}" to your type="email" input.

Related

Angularjs directive doesn't work

In the code below the ng-show hides the text but never shows back the message. The angularjs is linked and the data-binding is working but ng-show and ng-disabled with condition don't work. Please tell me if you see a problem below.
<from name="myProduct" class="main" ng-app="myProduct" novalidate>
<div class="inputbox">
<div class="boxtit">First Name</div>
<div style="width: 100%;display: block">
<input type="text" name="title" class="form-ctl" placeholder="" ng-required="true" ng-model="tit">
<span ng-show="myProduct.title.$invalid && myProduct.title.$touched" class="errormess">There's an error</span>
</div>
</div>
You have a typo - <from. Fix it and it should start working. I don't see any problems beside it.
Maybe you need change <from> for <form>.
This a error OSI 8...
Example(fix):
<form name="myProduct" class="main" ng-app="myProduct" novalidate>
<div class="inputbox">
<div class="boxtit">First Name</div>
<div style="width: 100%;display:block">
<input type="text" name="title" class="form-ctl" ng-required="true" ng-model="tit" />
<span ng-show="myProduct.title.$invalid && myProduct.title.$touched" class="errormess">There's an error</span>
</div>
</div>
</form>

Angular JS ionic search box with clear field button

My app is using ionic and angular js.. I am trying to add a clear button for the search, but Its not working?.. my Code is:
HTML:
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Search" ng-model="search">
</label>
<button class="button ion-android-close input-button button-small"
ng-click="clearSearch()" ng-if="search.length">
</button>
</div>
APP.JS
$scope.clearSearch = function() {
$scope.search = '';
};
Maybe i need something more but this is not working?
Any help thanks?
The problem is with ng-if use ng-show instead.
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Search" ng-model="search">
</label>
<button ng-click="search = ''" class="button ion-android-close input-button button-small" ng-show="search.length">Clear
</button>
</div>
To use a button along the input, swap the label to a span or div, your
ng-clicks will work fine after that.

accessing ng-form elements/values with ng-repeat

I'm looking for the best way to pass non-binding (correct term?) form data to a controller method. How would I go about accessing the object of the form and it's values?
html
<html ng-app="app">
<body ng-controller="MainController as main">
<ng-form name="add_lead_form">
<div ng-repeat="label in form.lead_labels track by $index" ng-show="label.visible">
<div class="input-group lead-data">
<span class="input-group-addon">{{getLabel(label)}}</span>
<input ng-model="add_lead_form.addleadValue[$index]" name="addleadValue" type="text" class="form-control" aria-describedby="basic-addon1">
<input type="hidden" ng-model="add_lead_form.addleadLabelId[$index]" name="add_lead_form.addleadLabelId" ng-value="label.id" />
</div>
</div>
<div class="pull-right"><button ng-click="addLead()" class="btn btn-primary btn-lg">Save Lead</button></div>
</ng-form>
</body>
</html>
app.js
var app = angular.module('app', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.addLead = function() {
console.log($scope.add_lead_form);
};
}]);
You could not access form inside ng-repeat which has been declared in parent div, For creating proper form you could add new innerForm inside your ng-repeat, You must need to change your html structure by adding new innerForm
<div ng-repeat="label in form.lead_labels track by $index" ng-show="label.visible">
<ng-form name="innerForm">
<div class="input-group lead-data">
<span class="input-group-addon">{{getLabel(label)}}</span>
<input ng-model="add_lead_form.addleadValue[$index]" name="innerForm.addleadValue" type="text" class="form-control" aria-describedby="basic-addon1">
<input type="hidden" ng-model="add_lead_form.addleadLabelId[$index]" name="innerForm.addleadLabelId" ng-value="label.id" />
</div>
</ng-form>
</div>
Give a try by using above code, Thanks

Functions in Angular controller not activated on button click

I am trying to make a contact me from with Angular. Right now, I have some input fields, a button, and an angular app as a script in the page to try and make things as simple as possible. I was trying to make sure things are talking to each other so I just put a console.log in my angular controller which I think should print to the console when I click the button. However, it just reloads the page every time.
Below is the code that is showing this issue
HTML:
<body ng-app="contactApp">
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<!-- Input Fields for contact form -->
<form ng-controller="ContactCtrl" class="form-horizontal" role="form" ng-submit="submit(name, email, message)">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Name" ng-model="info.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input class="form-control" type="email" placeholder="Email" ng-model="info.email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Message</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Place Message Here" ng-model="info.text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-success" type="submit">Contact Me</button>
</div>
</div>
</form>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
JS:
var contactApp = angular.module('contactApp', [])
.controller('ContactCtrl', function ($scope, $http){
$scope.submit = function (name, email, message){
console.log('contact with controller')
}
})
Most code is just creating the HTML form, see angular app at the bottom.
ooo so close ;) you've got a little typo in there ng-controller="contactCtrl" != .controller('ContactCtrl') check out your first letter.
I was using Firefox as my browser and I was looking for the output in their developer console. It was appearing in the firebug console. I still don't know why it doesn't appear in the regular console, but I will check firebug as well in the future. I accepted btm1's answer because he pointed out my typo and that made everything work when I started up firebug.

How to return the value of textbox using Ionic?

I have a form in Ionic and I am trying to return the value of the textbox, but am having issues. The rest of the form is loading and 'signup' is returned to the console. formData.email isn't bound in the template and neither is anything returned to the console when I type something in and click the button.
Any advice on what to do?
signup.html
<!-- Header -->
<div class="bar bar-header bar-light">
<button class="button icon-left ion-chevron-left button-clear button-dark">Back</button>
<h1 class="title">Signup</h1>
</div>
<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>
<div class="list list-inset">
<!-- Signup form text fields -->
<form>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" ng-model="formData.email">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<!-- Submit button for signup form -->
<button on-touch="onTouch()" class="button button-positive button-block">
Sign up
</button>
</form>
</div>
{{formData.email}}
controllers.js
.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
console.log('signup');
$scope.formData = {};
//Go to the guessing page
$scope.onTouch = function(item,event){
console.log($scope.formData.email);
};
});
What you're doing is correct, the only thing that I could do to recreate this was if you haven't entered a valid email address it returns undefined. This is a validation feature built in to Angular itself and has nothing to do with Ionic. You can find out more about this here: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Categories