I have a simple AngularJS app with a single form that has 2 fields on it. I am trying to read the values entered in those 2 fields from my controller but for some reason I am always getting undefined. I have triple checked my code but can't find anything in it, so I hope someone can please help and tell me what I am doing wrong and how to fix it.
Note: I am using latest AngularJS release 1.2
app.js
'use strict';
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/index',
{ templateUrl: 'templates/common/index.html',
controller: 'IndexController'
}).
when('/editcontact',
{ templateUrl: 'templates/contacts/editContact.html',
controller: 'editContactController'
}).
otherwise({redirectTo: '/index'});
}]);
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
....
....
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/contacts/editContactController.js"></script>
</body>
</html>
editContact.html
<form name="editContactForm">
<div>
<fieldset>
<input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
</fieldset>
<button type="submit" ng-click="saveContact(contacts, editContactForm)">Save</button>
<button type="button" ng-click="cancelEdit()">Cancel</button>
</div>
</form>
editContactController
myApp.controller('editContactController',
function editContactController($scope){
$scope.saveContact = function(contacts, editContactForm){
if(editContactForm.$valid){
console.log(contacts.name);
}
};
});
You have a typo. ng-modal should be ng-model
<input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
should be
<input id="name" type="text" placeholder=Name..." ng-model="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-model="contacts.phone">
Related
Hello guys i have some issue using date type and ng-model together. in my index.html i have the input field like this :
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
and my controller :
$scope.myExample = function() {
console.debug('date : ', $scope.myData.date);
}
in my console i get the log "date : undefined"
what seems to be the problem why i'm having undefined value? thanks
by the way im using "bootstrap-datepicker"
You have to init your myData object
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myData = {}; //Create the object
$scope.myExample = function() {
console.log('date : ', $scope.myData.date);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>
Here is the required solution using bootstrap-datepicker
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myData = {}
$scope.myData.date = new Date();
$scope.myExample = function() {
console.debug('date : ', $scope.myData.date);
console.log('date : ', $scope.myData.date);
}
});
<html>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<body>
<script>
$('#date').datepicker()
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>
</body>
</html>
Please run the above snippet
HERE IS A WORKING DEMO
Another solution can be passing the date value through your function.
This is how I have achieved this.
CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.myExample = function(date) {
console.log(date);
alert(date);
}
})
</script>
</body>
</html>
You can also use date filter available in angularjs. See documentation here
https://docs.angularjs.org/api/ng/filter/date
For me it helped to insert a placeholder attribute into the input tag, whose value is e.g.:
placeholder="yyyy-MM-dd" (cause this works for me as well: placeholder="dd.MM.yyyy")
<input class="form-control" type="date" id="date" ng-model="myData.date" placeholder="dd.MM.yyyy" />
After that the ng-model processed it correctly and stored the value. In fact, in the documentation it is mentioned in the example https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
I try to make disable second field until I do not enter 'Lokesh' in first field for that I have tried below code I am in learning stage of angularjs so please correct me where I am doing mistake.
eg.code
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<p>Enter 'Lokesh' to display last name</p>
<div ng-app="myApp" ng-controller="myCtrl">
<input data-ng-model="firstName"
type="text"
ng-disabled="{if(firstName="lokesh")}"
Last Name: <input type="text" ng-model="lastName"><br>
/>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName= "Kumar Gaurav";
});
</script>
</body>
The problem is with the attribute ng-disabled="{if(firstName=" lokesh ")}"
There is no need of using if, you can directly compare the strings.
Update the code as
ng-disabled="firstName=='lokesh'"
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app>
<input data-ng-model="firstName" class="span12 editEmail" type="text" placeholder="Type lokesh here" />Last Name:
<input type="text" ng-model="lastName" ng-disabled="firstName!=='lokesh'" />
<br>{{firstName}}
</div>
I'm building my first angular app, starting with a simple login form. I load the form from a partial, however when I try submitting the form, nothing is logged to the console, i.e. I assume my authenticate() method is not called. I have the following definition for my app.js:
'use strict';
angular.module('spForums',[])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.when('/login', {
templateUrl: 'static/partials/login.html',
controller: loginController,
controllerAs: 'login'
});
$locationProvider.html5Mode(true);
}])
And here's the controller, defined in a separate controller.js:
'use strict';
function loginController() {
this.email = '';
this.password = '';
this.authenticate = function () {
console.log(this.email);
console.log(this.password);
};
};
Here's the partial, login.html:
<form class="form-signin" novalidate ng-submit="login.authenticate()">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus ng-model="login.email">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" ng-model="login.password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<input class="btn btn-primary" type="submit" value="Sign-in">
</form>
And here's the relevant part of index.html, or in my case, forum.html that includes the partial:
<!doctype html>
<html lang="en" ng-app="spForums">
<head>
<script type="text/javascript" src="/static/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-resource.min.js"></script>
</head>
<body>
<div class="container" id="forumcontainer" ng-view>
</div> <!-- /container -->
<script type="text/javascript" src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controller.js"></script>
</body>
</html>
I'd like to end this by saying I'm new to Angular-JS. As in I just saw a bunch of tutorials and this is my first app. Please tell me where I'm wrong.
EDIT:- I'm using Angular-JS version 1.0.7.
You need to include ngRoute module into your application, it's not shipped by default:
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="/static/js/lib/angular.min.js"></script>
<script src="/static/js/lib/angular-route.min.js"></script>
<script src="/static/js/lib/angular-resource.min.js"></script>
</head>
Note, that you also need to define base href tag, since you are using HTML5 mode.
Then define module with necessary dependencies:
angular.module('spForums', ['ngRoute', 'ngResource'])
I'm newbie to angular
My angular controller is:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);
the app.js is:
'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "partials/login.html",
controller : "loginController"
})
});
login.html is:
<div>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</form>
</div>
I've used stateprovider for routing.
But, it's not showing anything in placeholder. What is the reason?
Solved the problem using ng-model instead of {{}}.
<div class="content">
<input name="username" type="text" class="input username" placeholder="username" ng-model="user_name" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="password" ng-model="user_password"/>
<div class="pass-icon"></div>
</div>
This works for me if I say ng-controller = "loginController" in the html-
<div ng-controller = 'loginController'>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</div>
Here's a JSBin with it working: http://jsbin.com/aDuJIku/265/edit?html,js,output
This solution doesn't include ui-router, but it should work with it.
Try this:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope','$timeout', function($scope,$timeout) {
$timeout(function(){
$scope.user_name="name";
$scope.user_password="name";
},100);
}]);
you just have to change to RouteProvider, In your case you just do:
angular.module('chatApp', [ 'ngRoute' 'ui.router','chatApp.filters','chatApp.services', 'chatApp.directives', 'chatApp.controllers'])
.config(function($routeProvider) {
$routeProvider.when('/login', { templateUrl: "partials/login.html", controller: "loginController" })
});
please make sure that you have angular-route js included.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
Hope this help you! ;)
Here's some examples for you this
Below mentioned code works.
Note: If somebody tries to run this code in preview its not going to work. JS and HTML code needs to be copied in separate file and use the names mentioned.
var myContrlApp = angular.module('ContrlApp', []);
myContrlApp.controller('MainController', function ($scope) {
var person = {
firstName: "Keith",
lastName: "Jackson",
};
$scope.message = "Welcome, Angular !";
$scope.person = person;
});
<html ng-app="ContrlApp">
<head>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<title>Angular JS Tryout</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
<div>First name: {{person.firstName}}</div>
<div>Last name: {{person.lastName}}</div>
</div>
</div>
</body>
</html>