I'm a newbie to Angular JS. I've created a form in my index.html page, when I fill the details in the form and press submit, it should redirect to details.html page. Where I can able to show the details filled on the form.
HTML
<html>
<script src="angular.min.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="FormApp">
<div class="forms" ng-controller="CustomerDetailsController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="firstName" required/>
<br>
<br>
Last Name:<br>
<input type="text" ng-model="lastName">
<br>
<br>
Age:<br>
<input type="text" ng-model="lastName">
<br>
<br>
Email :<br>
<input type="email" ng-model="lastName">
<br>
<br>
Location<br>
<input type="text" ng-model="lastName">
<br>
<br>
<button ng-click="submit()">SUBMIT</button>
</form>
</div>
</body>
</html>
CONTROLLER
var FormApp = angular.module('FormApp', []);
FormApp.controller('CustomerDetailsController', ['$scope',function($scope) {
$scope.submit = function() {
}
}]);
What will be the best way to do this? Any help would appreciated, Thanks.
You can achieve this by adding angular routing to your application which need ngRoute dependency. Then you need to define one parent controller that can hold the partial views common data like here it is mainCtrl.
Apart from that you missed few things while you created a form, form should have its name attribute so that angular will create a scope variable of that form and internally manages form validity inside that scope variable like $valid, $error, etc. Then the same name should be given to each form element, if you don't declare the name attribute, then it won't consider it as form element.
HTML
<html ng-app="app">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
<script src="example.js"></script>
</head>
<body>
<div ng-controller="mainCtrl">
<div class="forms">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
CODE
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1.html',
controller: 'CustomerDetailsController'
})
.when('/view2', {
templateUrl: 'view2.html',
controller: 'form2Ctrl'
})
.otherwise({
redirectTo: '/view1'
});
});
app.controller('mainCtrl', function($scope) {
$scope.form = {};
});
app.controller('CustomerDetailsController', function($scope,$location) {
$scope.submit = function(){
if($scope.form1.$valid)
$location.path('/view2');
};
});
app.controller('form2Ctrl', function($scope,$location) {
//this controller contain the data which will you get from
});
Working Plunkr
Update
Clearing confusion of on what form2Ctrl will contain as per request by #user3440121.
The second view may contain a ajax call that will fetch the user information from server and display it on the view or it can be any show the list of employees, Its depend on the whats the requirement of your application.
Basically you should not store data on client side as i did stored the data in form object and accessing it on view2 directly as I can access parent scope variable. I shown this only for demonstration purpose. In actual implementation we will take $route parameter from the URL & the we will make an ajax call to server which give data back to you. Currently in plunkr we redirecting to view2 using $location.path('/view2'); that would change to $location.path('/edit/1') and you need to add route to your app.config like
Route
.when('/edit/:id', {
templateUrl: 'view2.html',
controller: 'form2Ctrl'
})
Controller
app.controller('form2Ctrl', function($scope,$route) {
//we can get id here from $route object
console.log($route.params.id); //here it will be `id` which `1` in the URL
//now you have id you can make ajax to server and get required data
});
Hope above information cleared all the doubts about the question. Thanks.
Your $scope.submit function has nothing inside it for routing.
It should be:
$scope.submit = function($scope) {
$scope.$apply(function() {
$location.path("*place your details page here*");
});
}
Note that you also need to inject $location to your controller, as follows:
FormApp.controller('CustomerDetailsController',
['$scope', '$location', function($scope, $location) ...
Try reading the following for more details:
https://docs.angularjs.org/api/ng/service/$location
Also have you tried checking your paths? (e.g. angular.min.js, script.js)
Related
I have a file <input /> and a <button>, with a click handler assigned to the button.
What I would like to do is to execute the click handler on the submit button when the selected file changes on the file input.
My code currently looks like this:
angular.module('myapp', [])
.controller('MyController', function($scope) {
$scope.clickMe= function(){
alert("File Submitted!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="MyController">
<input type = "file">
<div><button ng-click="clickMe()">Submit</button></div>
</div>
</body>
If I understand your question correctly, then you should find that the logic fired when the submit button is clicked, can instead be automatically invoked when a file is picked on your <input type="file" /> element by updating your template as follows:
<input type="file" onchange="angular.element(this).scope().clickMe(this)">
This will cause the clickMe() function on the $scope object of the enclosing controller MyController, to be called. Here's a complete example (with submit button removed seeing it's redundant):
angular.module('myapp', [])
.controller('MyController', function($scope) {
$scope.clickMe = function() {
alert("File Submitted!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="MyController">
<input type="file" onchange="angular.element(this).scope().clickMe(this)">
</div>
</body>
I'm trying to submit a form when user clicks on any part of the form, and then process it using AnglujarJS. Here's how I tried doing it:
<form ng-click="submit()" ng-app="MyApp" ng-controller="MyCtr">
<input type="text" ng-model="my_val" name="my_val" value="0" style="display: none"/>
</form>
var app = angular.module('MyApp', []);
app.controller('MyCtr', function($scope) {
$scope.submit = function() {
$scope.my_val; // This is undefined
});
};
});
The problem is that $scope does not have form values. If I replace ng-click with ng-submit, the values are present, but I don't want to submit form by clicking on a submit button.
You need to declare and set to 0 $scope.my_valoutside of submit function and also ij Js code there are unnecessary closed brackets check that as well.
var app = angular.module('MyApp', []);
app.controller('MyCtr', function($scope) {
$scope.my_val="0";
$scope.submit = function() {
$scope.fromvalue.my_val
console.log($scope.fromvalue.my_val.$viewValue);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-click="submit()" ng-app="MyApp" ng-controller="MyCtr">
<input type="text" ng-model="my_val" name="my_val" value="0"/>
</form>
I want $scope.variable value in browser console but its always occur undefined.
form.htm
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"
required /></p>
<button ng-click="SendData()">Submit</button>
</form>
myctr.js
app.controller('myCtrl', ['$scope', '$http', 'ngCart', '$localStorage',
'$sessionStorage', '$window',
function($scope, $http, ngCart, $localStorage,
$sessionStorage, $window) {
$scope.SendData = function() {
console.log($scope.firstName)
$window.alert($scope.firstName)
};
}
]);
Possible problem is that you're using a simple string value $scope.firstName. If your input is more than one scope "deeper" in the DOM hierarchy, then your $scope.firstName and ng-model in the input become two independent variables so no wonder that you get $scope.firstName undefined. That's the typical problem with simple types and scopes inheritance. Possible ways to solve this would be:
use object to bind data between the controller and template: $ctrl.user.firstName and <input ng-model="user.firstName">.
use the "controllerAs" syntax.
Read more on this in documentation on controllers and scopes.
use the following modified code ---
var app = angular.module('myApp', ['ngStorage']);
app.controller('myCtrl', function($scope, $window,$http,$localStorage,$sessionStorage) {
$scope.SendData = function() {
console.log($scope.firstName)
$window.alert($scope.firstName)
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"
required /></p>
<button ng-click="SendData()">Submit</button>
</form>
</div>
Modified the answer...
As per the definition of ngModel it will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
Here when submit is clicked without filling the text box $scope.firstName is undefined because firstName it is not defined in the current $scope.
If something is typed in the text box , as per the definition of ng-model a firstName property will be created implicitly and added to the scope.
Let controller be
app.controller('MainCtrl', function($scope) {
$scope.lastName='';
$scope.SendData = function() {
console.log($scope.firstName)
alert($scope.firstName)
};
$scope.CheckLast = function() {
console.log($scope.lastName)
alert($scope.lastName)
};
});
HTML
<body ng-controller="MainCtrl">
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"/></p>
<button ng-click="SendData()">Submit</button>
<p>Last Name: <input type="text" name="lastName" ng-model="lastName"/></p>
<button ng-click="CheckLast()">Submit</button>
</form>
</body>
Here Demo plunker you can see firstName is undefined while lastName is not as last name is initialised within the scope. and if something will be filled to firstName text box before submit the it is defined.
I want to make a Kendo grid with 4 tabstrips, 4 children grids, 5 controllers, first is parent, others are children. Here is a part of code, with one parent and one child controller. Problem is that all the time I got an error "Argument '' is not a function, got undefined" Where should I define it? Everything is stored locally so the preview is not possible
Check this out:
http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html
You don't nest the controllers in your javascript. This is from that link:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
Instead, you nest the controllers in your markup. I don't see where you are binding the controllers in your markup, btw.
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
This is all from that link I provided.
I have object into rootscope and i would like to display some values in form inputs.
I tried following:
<input type="number" ng-model="$root.order.id" class="form-control" id="orderNumber" />
But this is not working.
How i should pass value into ng-model?
Thanks for any help.
No need of attach de $root to the variable, the flow of scope in angular is first search in the local scope for the variable, if not found search the property in $scope.parent, and the rootScope if the high level of parent if not match with any else, then search there.
http://plnkr.co/edit/3ENyPRwrFq5ssR2uLtQy
In this plnkr look the usage of the root scope
Controller:
app.controller('MainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$rootScope.varRoot = {
element: "Jesús"
};
}]
);
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{varRoot.element}}!</p>
<input type="text" ng-model="varRoot.element">
</body>
Just use the name, ex:
$rootScope.order.id = 3;
<input type="number" ng-model="order.id" class="form-control" id="orderNumber" />