I got no error in my console, but my ng-submit is just not triggering. I debug by putting something in my controller, it did trigger, means it's not the problem of my controller not loading.. Below is my source code
(function() {
angular.module('MyApp')
.controller('SignupCtrl', SignupCtrl);
SignupCtrl.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];
function SignupCtrl($scope, $rootScope, $location, $window, $auth) {
console.log('hello') // triggered
var ctrl = this;
ctrl.signup = signup;
function signup() {
console.log('trigger') // nope??
}
}
});
View
<form ng-submit="signup()">
<div class="form-group">
<label for="name">First Name</label>
<input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" autofocus>
</div>
<button type="submit" class="btn btn-success">Sign up</button>
</form>
try this:
signup.js
(function () {
/* jshint validthis: true */
'use strict';
angular
.module('MyApp')
.controller('Signup', Signup);
Signup.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];
function Signup($scope, $rootScope, $location, $window, $auth) {
var vm = this;
vm.signup = signup;
vm.user = ...;
function signup() {
console.log('trigger');
}
}
})();
signup.html
<section id="signup-view" data-ng-controller="Signup as vm">
<form>
<div class="form-group">
<label for="name">First Name</label>
<input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="vm.user.fname" autofocus>
</div>
<button class="btn btn-success" data-ng-click="vm.signup()">Sign up</button>
</form>
</section>
As a side note, you missed two ';' in your code. I suggest you regularly test your JS code with a tool like JSHint.
Related
I have a form in which I want to pass some data and post them into an URL.
What am I doing wrong here? Thanks
template.html
<div ng-controller="statusController">
<form role="form" name="form" method="post" ng-submit="rate(ratingData)">
<div class="form-group float-label-control">
<label for="title">Title</label>
<input id="title" name="title" type="text" class="form-control" placeholder="Title" ng-model="ratingData.title">
</div>
<div class="form-group float-label-control">
<label for="rating">Rating</label>
<input id="rating" name="rating" type="text" class="form-control" placeholder="Rating" ng-model="ratingData.rating">
</div>
<div class="form-group float-label-control">
<label for="review">Review</label>
<input id="review" name="review" type="text" class="form-control" placeholder="Review" required ng-model="ratingData.review">
</div>
<div class="form-group float-label-control text-center ">
<button type="submit" class="btn btn-primary" formmethod="post">Submit</button>
</div>
</form>
controller.js
angular.module('deliveryStatus', ['ngRoute'])
.component('deliveryStatus', {
templateUrl: 'components/delivery-status/delivery-status.template.html'
})
.controller('statusController', function ($http, $scope, $routeParams, Auth, $window, $timeout, $location) {
$scope.rate = function (ratingData) {
$location.url('/rating');
$http.put('/api/rating-detail', $scope.ratingData).then(function (res) {
console.log('worked');
}).catch(function (err) {
console.log('error rating');
});
};
});
Did you mean to pass the variable ratingData and then try to access it from the scope?
$http.put('/api/rating-detail', $scope.ratingData).then(function (res) {
Try
$http.put('/api/rating-detail', ratingData).then(function (res) {
I don't see ratingData initialised anywhere. See below code snippet, change it and it should work.
angular.module('deliveryStatus', ['ngRoute'])
.component('deliveryStatus', {
templateUrl: 'components/delivery-status/delivery-status.template.html'
})
.controller('statusController', function ($http, $scope, $routeParams, Auth, $window, $timeout, $location) {
$scope.ratingData = {};
$scope.rate = function (ratingData) {
console.log(ratingData)
$http.put('/api/rating-detail', $scope.ratingData).then(function (res) {
console.log('worked');
$location.url('/rating');
}).catch(function (err) {
console.log('error rating');
});
};
});
I recently updated my Angular from 1.5.x to 1.6.4 and now, when I go to a form, I get the below error message whenever I try to type something up in the form/textbox:
TypeError: Attempted to assign to readonly property.
This is my controller:
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http){
$scope.post = '';
$scope.postCreated = false;
$scope.makeNewPost = function() {
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res){
$scope.postCreated = true;
//extra code not related to the form itself...
};
}]);
My HTML looks like this:
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
I looked this error up and everything I am seeing has nothing to do with what my set up is like.
Please help me out on this. I don't know where to go from here.
Thanks
Try this...
you have initialized $scope.post = ''; as a string. But that should be $scope.post = {}; an object.
var mainApp = angular.module('app', []);
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http) {
$scope.post = {};
$scope.postCreated = false;
$scope.makeNewPost = function() {
console.log($scope.post.title);
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res) {
$scope.postCreated = true;
//extra code not related to the form itself...
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app='app' ng-controller='newPostController'>
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
</div>
Hi I am developing Angularjs application. I am making ajax call to server to get some details. Request is POST. Code written for Ajax is looping and it is not stopping.
(function () {
angular.module('RoslpApp').controller('ChangePassword', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'cfg', 'toastr',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, cfg, toastr) {
var url = cfg.Baseurl + "api/Customer/ResetPassword";
// alert(SomeFactory.getData());
var url = cfg.Baseurl + "api/Customer/ModifyPassword";
var ID = $stateParams.LoginID;
debugger;
//this loops and never stops
$scope.changePassword = function () {
var resetpassword = {
ID: ID,
NewPassword: $scope.otpnewpassword
};
$http.post(url, resetpassword).then(function (response) {
}, function (error) {
});
}
}]);
})();
This is my html code.
<div class="body-wrapper background-pattern">
<div class="form-wrapper">
<div class="form-container">
<h2 class="form-header">Change Password</h2>
<div class="form-row">
<div class="inputblock">
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input type="password" class="with-icon" placeholder="New Password" ng-model="newpassword">
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input type="password" class="with-icon" placeholder="Confirm Password">
</div>
</div>
<div class="button-container">
<input type="button" value="Change Password" id="input-submit" ng-bind="changePassword()">
<input type="submit" value="Cancel" id="input-cancel">
</div>
</div>
</div>
</div>
I am not sure why Ajax call is looping. May I get some help here to fix this? Any help would be appreciated. Thank you.
You are using ng-bind with a function, ngBind attribute tells AngularJS to replace the text content of the specified HTML element Try ng-click instead of that.
<input type="button" value="Change Password" id="input-submit" ng-bind="changePassword()">
to
<input type="button" value="Change Password" id="input-submit" ng-click="changePassword()">
I have a master controller and I would like to set up the login page to take me to "/tables" path if username=admin and password=admin, however I am getting this error everytime I try to login
TypeError: Cannot read property 'path' of undefined
I added $location in the controller and in the login function but nothing changed keep getting same error. If I take $location out I get this error
ReferenceError: $location is not defined
Not sure what to do there. Any help is appreciated. Here is my code
angular
.module('RDash')
.controller('MasterCtrl', ['$scope', '$cookieStore', MasterCtrl]);
function MasterCtrl($scope, $cookieStore, $location) {
/**
* Sidebar Toggle & Cookie Control
*/
var mobileView = 992;
$scope.getWidth = function() {
return window.innerWidth;
};
$scope.login = function($location) {
if($scope.credentials.username !== "admin" && $scope.credentials.password !== "admin") {
alert("you are not the admin");
}
else{
$location.path('/tables');
}
};
}
login.html:
<div ng-controller="MasterCtrl">
<form >
<div class="jumbotron" class="loginForm">
<div class="form-group" id="loginPageInput">
<label for="exampleInputEmail1">User Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username" ng-model="credentials.username">
</div>
<div class="form-group" id="loginPageInput">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="credentials.password">
</div>
<div id="loginPageInput">
<button ng-click="login()" type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<div id="loginPageInput">
<div class="wrap">
<button ng-click="register()" class="btn btn-default" id="lefty" >Register</button>
<p ng-click="forgotpass()" id="clear"><a>Forgot my Password</a></p>
</div>
</div>
</div>
</div>
You missed to inject $location in your dependency array of MasterCtrl
Code
angular
.module('RDash')
.controller('MasterCtrl', ['$scope', '$cookieStore', '$location', MasterCtrl]);
//^^^^^^^^
function MasterCtrl($scope, $cookieStore, $location) {
Also you need to remove $scope.login parameter $location which is killing the service $location variable existance which is inject from the controller.
$scope.login = function ()
You are not passing any $location to login function hence it's undefined and shadows outer $location local variable. Correct code should be:
$scope.login = function () {
if ($scope.credentials.username !== "admin" && $scope.credentials.password !== "admin") {
alert("you are not the admin");
} else {
$location.path('/tables');
}
};
I would like to submit a form using Angular UI Bootstrap's modal. I'm instantiating the modal like:
AdminUsers.factory('ProjectsService', ['$resource', function($resource) {
return $resource('/api/users?sort=createdAt desc');
}]).controller('AdminUsersCtrl', ['ProjectsService', '$scope', '$http', '$modal', '$log', function(ProjectsService, $scope, $http, $modal, $log, $modalInstance) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: '../templates/userModal.html',
controller: function($scope, $modalInstance) {
$scope.user = {};
$scope.ok = function () { $modalInstance.close($scope.user); };
$scope.cancel = function () { $modalInstance.dismiss('cancel'); };
},
resolve: {
items: function () {
return $scope.user;
}
}
});
modalInstance.result.then(function (user) {
$scope.user = user;
$http.post('/api/users/new', $scope.user).success(function() {
$scope.users.unshift($scope.user);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
PS: Please note the controller above does have other methods that is not being displayed above.
The code in my userModal.html is:
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h6>New customer</h6>
</div>
<div class="modal-body">
<form class="form-horizontal fill-up separate-sections">
<div>
<label>Name</label>
<input type="text" ng-model="user.name" placeholder="Name" />
</div>
<div>
<label>Email</label>
<input type="email" ng-model="user.email" placeholder="Email" />
</div>
<div>
<label>Admin</label>
<select class="form-control" ng-model="user.admin"
ng-options="option as option for option in [true, false]"
ng-init="user.admin=false"></select>
<input type="hidden" name="user.admin" value="{{user.admin}}" />
</div>
<div>
<label>Password</label>
<input type="password" ng-model="user.password" placeholder="Password" />
</div>
<div>
<label>Password confirmation</label>
<input type="password" ng-model="user.confirmation" placeholder="Password confirmation" />
</div>
<div class="divider"><span></span></div>
<div class="divider"><span></span></div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-blue btn-lg" ng-click="ok()">Save</button>
<button class="btn btn-default btn-lg" ng-click="cancel()">Cancel</button>
<input type="hidden" name="_csrf" value=_csrf />
</div>
The problem lies with the hidden input. I need to submit the csrf with form to the server but I don't know how. If this was a jade template I could simply:
input(type="hidden", name="_csrf", value=_csrf)
and Sails/Express would deal with the rest. But because this is a html template used by Angular only, I don't know how to access the _csrf key. I've tried looking into window.document.cookie however it returned undefined.
Can anyone shed some light on this?
Many thanks