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');
});
};
});
Related
I am creating a web app, where I have one page which is home.html and about.html. In the home.html I have list of users, and when they click on one of the users, it goes to about.html, but does not show the users info. Can anyone check my code, to see what I have done wrong. Thanks in advance.
Here is my code. (home.html)
<form name="myForm">
<label>Search
<input type="text" size="35" ng-model="userSearch">
</label>
</form>
<br/>
<label>Filters</label>
<button type="button" class="btn btn-link">+ Add Filter</button>
<hr>
<legend>Users</legend>
<div class="people" ng-repeat="person in userInfo.lawyers | filter:userSearch" >
<a href="#/lawyer/{{ person.id }}">
<img ng-src="{{person.imgUrl}}"/>
<span class="name">{{person.firstName}} </span>
<span class="name">{{person.lastName}} </span>
<p class="title">{{person.title}} </p>
<span class="date">{{person.date}} </span>
</a>
</div>
About.html
<div class="people-view">
<h2 class="name">{{person.first}}</h2>
<h2 class="name">{{person.last}}</h2>
<span class="title">{{person.title}}</span>
<span class="date">{{person.date}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="person.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="person.last">
<br>
<b>Email:</b>
<input type="email" ng-model="person.email">
<br>
<b>Phone:</b>
<input type="num" ng-model="person.phone">
<br>
<b>Website:</b>
<input type="text" ng-model="person.website">
<br>
<b>Education:</b>
<input type="text" ng-model="person.education">
<br>
<b>Education Year:</b>
<input type="text" ng-model="person.year">
<br>
</form>
</div>
</div>
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
//form setting to true
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/lawyer';
}
});
app.config(function ($routeProvider) {
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/lawyer'
});
});
Controller
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
people.getUserInfo().then(function (response) {
$scope.person = people.getUserInfo();
console.log($scope.person.lawyers);
}, function (error) {
console.log(error)
});
}]);
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo.lawyers);
}, function (error) {
console.log(error)
});
}
});
Services
app.factory('people', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://******************');
}
};
return userInfo;
}]);
As others mentioned, your whole code is in wrong way! but I will try to help as much as I can.
You don't have any method in LawyerController to get the data, so let's begin from that :
change your $routeProvider in app.js like this to have a method :
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html",
method: 'lawyerInit'
})
.otherwise({
redirectTo: '/lawyer'
});
Then change your LawyerController to something like this :
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
$scope.lawyerInit = function(){
people.getUserInfo().then(function (response) {
$scope.getAll= people.getUserInfo();
for (var i=0; i<=$scope.getAll.length -1; i++){
if($scope.getAll[i].lawyers.id==$routeParams.id){
$scope.person= $scope.getAll[i];
}
}
console.log($scope.person.lawyers);
}, function (error) {
console.log(error)
});
}
}]);
Hope this work, I was not sure how is your json response, if you get error in this line if($scope.getAll[i].lawyers.id==$routeParams.id) you need make sure the id where is exactlly in your json object.
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.
I'm using AngularJS 1.4.6 and Satellizer for oauth.
I'm doing everything as written but always get same error:
angular.js:12450 TypeError: $auth.login is not a function
login.html:
<div class="form-group">
<input type="email" class="form-control underline-input" placeholder="Email" ng-model="user.email" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control underline-input" ng-model="user.password" required>
</div>
<div class="form-group text-left mt-20">
<button type="submit" class="btn btn-greensea b-0 br-2 mr-5" ng-click="login()" ng-disabled='form.$invalid'>Login</button>
<label class="checkbox checkbox-custom checkbox-custom-sm inline-block">
<input type="checkbox"><i></i> Remember me
</label>
<a ui-sref="core.forgotpass" class="pull-right mt-10">Forgot Password?</a>
</div>
</form>
Login controller:
.controller('LoginCtrl', function ($scope, $auth) {
$scope.user = {};
$scope.user.email = 'test#gmail.com';
$scope.user.password = 'test';
$scope.login = function () {
$auth.login($scope.user).then (
function (response) {
console.log(response);
},
function (error) {
console.log(error);
}
)
}
app.js:
.config(['$stateProvider', '$urlRouterProvider', '$authProvider', function($stateProvider, $urlRouterProvider, $authProvider ) {
$authProvider.loginUrl = '/auth/login';
...
I tried different settlements, researched github issues but not found a solution.
Whats my fault? How can I fix it?
I add to controller array option
.controller('LoginCtrl', ['$scope','$auth', function ($scope, $auth) {
$scope.user = {};
$scope.user.email = 'test#gmail.com';
$scope.user.password = 'test';
$scope.login = function () {
$auth.login($scope.user).then (
function (response) {
console.log(response);
},
function (error) {
console.log(error);
}
)
}]
what am trying to do is to get data from the form use it in my controller in HTTP post call but it's not working
I know i might have problem with inheritance of scopes but icant solve it.
here is my controller code:
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.submit = function() {
var url = 'http://localhost:3000/register';
var user = {
email: $scope.email,
password: $scope.password,
};
console.log($scope.user);
$http.post(url, user)
.success(function(res){
console.log('You are now Registered');
//$state.go('app.items');
})
.error(function(err){
console.log('Could not register');
// $state.go('error');
});
};
})
Here is the code of my Template:
<form name="register">
<div class="list">
<label class="item item-input no-border">
<input name="fullname" type="text" ng-model="fullname" placeholder="Full Name" required="">
</label>
<label class="item item-input">
<input name="email" type="email" ng-model="user.email" placeholder="Email" required="">
</label>
<p class="blue-font" ng-show="register.email.$dirty && register.email.$invalid">Please Write valid Email.</p>
<label class="item item-input">
<input name="password" type="password" ng-model="user.password" placeholder="Password" required="">
</label>
<button ng-click="submit();" ng-disabled="register.$invalid" type="submit" class="button signup-btn sharb-border white-font blue-bg-alt border-blue-alt ">
Sign Up
</button>
</div>
</form>
Note: i tried the ng-submit its not really the problem
Inside the controller.
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.user = {
email: '',
password: ''
};
$scope.submit = function() {
And this
var user = {
email: $scope.user.email,
password: $scope.user.password
};
Also drop the ; in ng-click
<button ng-click="submit()" ...>
Try to use rootScope (docs.angularjs.org/$rootScope").
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