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');
}
});
Related
I am using sessionStorage to autosave form data while entering data into the input field.But I cannot able to save the data. If the page is refreshed the data should be present in the input field. Can anyone explain why it is not working?
My form is,
<form name="createArticleForm" ng-change="autoSave()">
<input type="text" name="firstname" ng-model="emp.firstname" required>
<input type="text" name="lastname" ng-model="emp.lastname" required>
<input type="text" name="designation" ng-model="emp.designation" required>
</form>
Js file:
$scope.autoSave= function(){
$scope.emp={};
sessionStorage.setItem('emp', JSON.stringify(emp));
var save = JSON.parse(sessionStorage.emp);
console.log(sessionStorage['emp']);
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Write something in the input field:</p>
<input type="text" ng-model="emp.firstname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.lastname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.email" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.password" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{value}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function() {
sessionStorage.setItem('emp', JSON.stringify($scope.emp));
$scope.value = JSON.parse(sessionStorage.getItem('emp'))
};
}]);
</script>
</body>
</html>
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>
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>
Below is my angularjs code: I am not able to clear inputComment field after form submit.
Here i am able to add record successfully but after adding record i am trying to clear the input field but i am not able to do it.
HTML code:
<body ng-app="taskDemo" ng-controller="taskController">
<div class="widget-body">
<form class="add-task" ng-if="addNewClicked" ng-init="addNewClicked=false;">
<div class="">
<div class="input-group">
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
<div class="input-group-btn">
<button ng-click="addTask(inputComment)" type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i> Add New Task
</button>
</div>
</div>
</div>
</form>
</div>
</body>
JS Code:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" >
app = angular.module('taskDemo', []);
app.controller('taskController', function($scope, $http){
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment = '';
};
}
</script>
Read about Prototypical Inheritance here : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Change yr controller to this :
app.controller('taskController', function($scope, $http){
$scope.inputComment ={value:''};
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment ={value:''};
};
}
and Inside yr HTML page change this
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
to
<input name="comment" ng-model="inputComment.value" type="text" class="form-control" >
I know that there are a lot of other similar questions but I didn't find the answer there.
<html ng-app="app" ng-controller="AppController">
...
<form class="navbar-form navbar-left" role="search" ng-submit="alert()">
<div class="form-group">
<input type="text" class="form-control search" ng-model="text" />
</div>
<button type="submit" class="btn btn-default icon-default icon-search">Submit </button>
</form>
</html>
You cant use alert (window.alert) function in angular as you normally do in plain javascript. This is example from angular $window service docs:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert(greeting);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting(greeting)">ALERT</button>
</div>
If you put doGreeting (name it as you want) function in your controller and inject $window, then your example should work:
...
<form class="navbar-form navbar-left" role="search" ng-submit="doGreeting()">
...
Try to submit the form by adding ng-click in the button tag and call submit function by passing your form in the ng-click. The function is where you write your logic in the controller. submit