I'm new to Angular and Ionic and I have problem with getting value of input. I get "undefined". Here is my code:
.controller('myCtrl', function($scope) {
$scope.submit = function () {
console.log($scope.name);
}
}
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
try this
<form>
<input type="text" ng-model="name">
<button ng-click="submit()" class="button">Send</button>
</form>
Try this code
<form ng-submit="submit()">
<input type="text" ng-model="FinalData.name" name="name">
<button class="button">Send</button>
</form>
And then in controller
$scope.FinalData={};
$scope.FinalData.name ="dasda";
$scope.submit = function(){
console.log($scope.FinalData.name);
}
Check with this example
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.name = 'Hello World!';
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
</div>
</body>
</html>
Related
I am creating a to-do list in angular js. I am trying to access the form in the controller. However, when I click the add new button, it doesn't add to the list.
There is also no error displaying which shows to me that the function probably isn't doing anything.
How do I get the add new button to add to the list.
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<h1>To do List</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" ng-controller="todoCtrl as vm">
<form name="vm.myform" ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" ng-click="vm.toDoAdd " value="Add New">
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"><span ng-bind="x.todoText">
</span>
</div>
<p>
<button ng-click="remove()">Remove marked</button></p>
</form>
</body>
</html>
Here is app.js:
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
function todoAdd() {
var vm=this;
vm.toDoAdd=toDoAdd;
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}
}])
I have made some changes to your application:
<body ng-app="myApp" ng-controller="todoCtrl">
<form ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
<br>
<div ng-repeat="x in toDoList">
<input type="checkbox" ng-model="x.done" /><span ng-bind="x.todoText">
</span>
</div>
<p>
<button type="button" ng-click="remove()">Remove marked</button></p>
</form>
</body>
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}])
There are two ways of using controllers, one with $scope and other with controller as vm in this case for simplicity I am using $scope you can read more about the other notation in this guide
<html>
<head>
<title>Javascript Login Form Validation</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script>
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
</script>
</head>
<body>
<div class="container">
<div class="main" ng-app ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div></div></body></html>
this is my above code and i am unable to call the ctrlClickHandler method . i dont knwo where i am wrong. could any one please help to me on it.
Thanks in advance!.
you need to define the angular.module inorder to work with angular
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
angular.module("app",[])
.controller("ctrl", MyCtrl)
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main" ng-app="app" ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div>
Scope variable returns undefined value when using inside same Scope function.
index.html
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
</body>
app.js
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function(){
alert($scope.name+' scope variable');
}});
output:
undefined scope variable
Try this example :
index.php
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="start.name">
<input type="submit" name="submit" value="Submit">
</form>
app.js
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.start= {};
$scope.submit = function(){
alert($scope.start.name+' scope variable');
);
$scope.name is coming undefined because it is a scope model declared in UI and no value is assigned to it yet. This is expected behavior. If you want some default values assign those from controller or use an ng-init.
Try This...
html files ...
<html>
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
</body>
<script src="app.js"></script>
</body>
</html>
this is your js file
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function(){
alert($scope.name+' scope variable');
}
});
just pass the modal value in ng-submit like this
1st way ->
<form ng-submit="submit(name)">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
js file
$scope.submit = function(value){
alert(value+' scope variable');
}});
2nd way ->
or you can do this
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
js file
your code is fine just check parenthesis it is ok code
$scope.submit = function(){
alert($scope.name+' scope variable');
};
use this working plunker
https://plnkr.co/edit/C7oZck4hpt5xHBKkVGku?p=preview
Please go through below code --
HTML -
<body ng-app="starter" ng-controller="AppCtrl">
<form>
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit" ng-click="submit();">
</form>
</body>
JS
<script>
angular.module('starter', []).controller('AppCtrl', function($scope) {
$scope.name='';
$scope.submit = function(){
alert($scope.name+' scope variable');
};
});
</script>
Hope it helps you !
The code looks fine to me there must a syntax error in your controller braces are not completed
I have created a working plunker
https://plnkr.co/edit/UGEa1uvS83cJHAcXxYMi?p=preview
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function() {
alert($scope.name+' scope variable');
}
});
I can clear a whole set of inputs but the thing is, it only clears when its value is valid. When it's not it does not clear anymore.
Something has to be added and I can do it via manually using an each loop. However I am looking to avoid this solution and something like a lesser code, so maybe someone has already come up with a solution. My current code is:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName" id="firstName" minlength="5"><span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName" id="lastName" minlength="5"><span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code" minlength="3"> <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>
Just use ng-model-options with allowInvalid flag:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName"
id="firstName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName"
id="lastName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code"
minlength="3" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>
I've just started learning AngularJS and one of my first pages requires intercepting a submit. I'd like to use the ng-submit directive but it seems there's something wrong in my code:
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
function MyFormController($scope) {
scope.add = function(field) {
alert(field);
};
}
</script>
<body>
<div ng-controller="MyFormController">
<form ng-submit="add(field)">
<input type="text" name="field" ng-model="field" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
I've added an alter to see if the add function is called, yet nothing is displayed. I guess it must be a silly issue, yet I'm unable to catch it. Any help ? Thanks!
You can save the value without the parameter :
<script>
function MyFormController($scope) {
$scope.add = function() {
alert($scope.field);
};
}
</script>
<body>
<div ng-controller="MyFormController">
<form ng-submit="add()">
<input type="text" name="field" ng-model="field" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
Please try this.
<script>
function MyFormController($scope) {
$scope.add = function(field) {
alert($scope.field);
};
}
</script>
<body>
<div ng-controller="MyFormController">
<form ng-submit="add()">
<input type="text" name="field" ng-model="field" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>