I have a form that I'm trying to use ng-submit with, but its not calling the controller function submit()
index.html
...
<body ng-app="app">
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
The form:
<div class="container">
<form class="form-signin" name="login" id="loginForm" ng-submit="submit()">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email Address" name="email" ng-model="formData.email">
<input type="password" class="input-block-level" placeholder="Password" name="password" ng-model="formData.password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember Me
</label>
<input class="btn btn-large btn-primary" type="submit">
</form>
</div>
And my app.js:
'use strict';
var app = angular.module('app',['ngRoute', 'app.controllers']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/login.html',
controller: 'loginController'});
});
And my controller.js:
'use strict';
/* Controllers */
angular.module('app.controllers', [])
.controller('loginController', ['$http', function($scope, $http) {
$scope.formData = {};
console.log('Controller Loaded');
$scope.submit = function() {
console.log('Click');
$http({
method: 'POST',
url: 'http://localhost:8080/RoommateAPI/authentication/login',
data: $scope.formData,
headers: {'Content-Type': 'application/json'}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function() {
console.log("ERROR")
});
}
}]);
When I hit submit it's not erroring out or doing anything really... Feel like I'm missing something obvious but I've looked at this and everything appears to be the same.
What I've tried:
Consolidating the controller into the app.js
Removed double declaration of the controller form the markup
Your arguments are wrong in the constructor function of your controller. You have:
app.controller('loginController', ['$http', function($scope, $http) {
Change this to be:
app.controller('loginController', ['$scope', '$http', function($scope, $http) {
Try to put your form tag inside a div, and then declare the controller on this div instead of the form.
Related
I am implementing checkbox and also I want to set status(true, false) in url as a parameter But only false value is set in url parameter. But When I click on checkbox then true value is not set in url as a parameter. I am using $location.search. I not able to find out what is the issue with true value.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
$scope.confirm = function(){
alert($scope.checkboxModel.value);
$location.search({checkbox: $scope.checkboxModel.value});
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="wrapper">
checkbox status should set in url as parameter
<label>
<input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
</label>
</div>
</div>
Try to emit the locationChangeSuccess event manually. and also You missed to inject $location in the controller.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {
$scope.confirm = function() {
alert($scope.checkboxModel.value);
$location.search({
checkbox: $scope.checkboxModel.value
});
$scope.$emit('$locationChangeSuccess');
console.log($location.search());
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="wrapper">
checkbox status should set in url as parameter
<label>
<input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
</label>
</div>
</div>
Did you check your browser's console for errors? You missed to inject $location.
var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {
$scope.confirm = function(){
$location.search({checkbox: $scope.checkboxModel.value});
}
})
Use this.
Hello I am developing Angularjs Application. I am trying to display Toaster messages in my angular controller. I refereed http://angular-js.in/angular-toastr/. I am facing below issue. I am not able to call success,info etc notification from controller and i am getting annot read property 'success' of undefined error. I have tried as below.
In index.html i have added below code.
<!--Toaster-->
<script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
<!--Toaster-->
this is my main.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
//ui-routing states here});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate, toastr) {
toastr.success('Hello world!', 'Toastr fun!');
$scope.clickHandler = function (key) {
$translate.use(key);
};
}]);
May I know why I am facing issues here? any help would be appreciated. thank you
add toastr as string dependency to the controller.
change this
app.controller('RoslpAppController', ['$scope', '$translate',function ($scope, $translate, toastr) {
to this
app.controller('RoslpAppController', ['$scope', '$translate','toastr',function ($scope, $translate, toastr) {
You are missing toastr in controller definition.
app.controller('RoslpAppController', ['$scope', '$translate','toastr', function ($scope, $translate, toastr) {
Try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$(function () {
$('#error').click(function () {
// make it not dissappear
toastr.error("Noooo oo oo ooooo!!!", "Title", {
"timeOut": "0",
"extendedTImeout": "0"
});
});
$('#info').click(function () {
// title is optional
toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning");
});
$('#success').click(function () {
toastr.success("YYEESSSSSSS");
});
});
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<input type="button" value="Error" id="error" />
<input type="button" value="Info" id="info" />
<input type="button" value="Warning" id="warning" />
<input type="button" value="Success" id="success" />
<br><br><br><br>
See official example: <a href='http://codeseven.github.io/toastr/demo.html' target='blank'>Here</a>
</body>
</html>
I started looking into angular and cannot seem to figure out why my data is not passed to my directive. I have code here: https://plnkr.co/edit/ONwYevQ4NbvBVjTwARHl?p=preview
My Code:
app.js:
var app = angular.module('mjApp', []);
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
$scope.name = "m.jacionis";
$scope.avatar = null;
$scope.fetchData = function(){
var callUrl = 'https://api.github.com/search/users?q=' + $scope.name;
$scope.avatar = "http://images.clipartpanda.com/sad-face-clipart-black-and-white-9c4eqRyyi.png";
$http({
method: 'GET',
url: callUrl
}).then(function successCallback(response) {
$scope.avatar = response.data.items.length > 0 ?
response.data.items[0].avatar_url : $scope.avatar;
console.log($scope.avatar);
}, function errorCallback(response) {
console.log('avatar stays the same');
});
};
}]);
app.directive("mjDirective", function(){
return {
restrict: "EA",
templateUrl: 'template.html',
scope: {
name: "=name",
avatar: "=avatar"
}
};
});
index.html:
<!DOCTYPE html>
<html ng-app="mjApp">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="parent" ng-controller="MainController">
<div class="line">
<input type='text' ng-model='name' />
<input type="button" ng-click="fetchData()" value="Submit User Name" />
</div>
<mj-directive name=name userAvatar=userAvatar></mj-directive>
</div>
</body>
</html>
template.html:
<div class='line'>
<p>Name : <strong>{{name}}</strong></p>
<img class="avatar" src={{avatar}}/>
</div>
name value is passed, but avatar value which I get when I fetch data isn't. I cannot seem to figure out, why it is like that. Any ideas or suggestions would help a lot.
I think you have taken wrong name userAvatar instead of avatar since you binded avatar
your bindings,
scope: {
name: "=name",
avatar: "=avatar"
}
So, you have to take name and avatar in directive.
<body>
<div class="parent" ng-controller="MainController">
<div class="line">
<input type='text' ng-model='name' />
<input type="button" ng-click="fetchData()" value="Submit User Name" />
</div>
<mj-directive name=name avatar=avatar></mj-directive>
</div>
</body>
change directive,
<mj-directive name=name avatar=avatar></mj-directive>
I think you need to wrap the name and avatar in strings when you use them in HTML.
<mj-directive name="name" userAvatar="userAvatar"></mj-directive>
Also inside the directive you should have:
scope: {
user: "=name"
avatar: "=userAvatar"
}
I am having trouble with two way data binding, I fetch an array of objects from the controller and when I make another request trying to submit part of the data, It goes back and is undefined in the controller when I use console.log,
The app uses AngularJS 1.5.8 and angular-route
Can someone please help me figure out why the console.log in the register scope function logs undefined instead of the names. The code
My index file:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src='lib/angular.min.js'></script>
<script type="text/javascript" src='lib/angular-route.js'> </script>
<script type="text/javascript" src='app.js'></script>
<script type="text/javascript" src='controllers.js'></script>
<title></title>
</head>
<body ng-app='myApp'>
<div ng-view>
</div>
</body>
</html>
The partial I am using is home.html:
<section ng-controller='MyCtrl'>
{{test}}
<form>
<input type="text" name="test" ng-model='post'>
<input type="submit" name="sub" value="post" ng-click='getdata()'>
</form>
<table ng-repeat='i in list'>
<tr>
<td>{{i.name}}</td>
<td>{{i.job}}</td>
<form>
<input type="text"
name="regname" value='{{i.name}}' \ng-model='{{i.name}}' hidden>
<td><input type="submit" name="sub2" ng-click='register()'></td>
</form>
</tr>
</table>
</section>
The app is declared in app.js:
(function () {
// body...
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'MyCtrl'
}).when('/home', {
templateUrl: 'home.html',
controller: 'MyCtrl'
})
})();
The controller code is in controllers.js:
var app = angular.module('myApp');
app.controller('MyCtrl',
['$scope', '$http', function ($scope, $http) {
// body...
$scope.test = 'the test is running';
$scope.getdata = function(){
var item = $scope.post;
console.log(item);
$scope.list = [{'name': 'shem', 'job':'engineer'},
{'name': 'Reinhard', 'job': 'devops'}]
}
$scope.register = function(){
console.log($scope.regname);
}`enter code here`
}]);
Because you are using
console.log($scope.regname);
that isn't existing in your scope. In fact, in your HTML you have
<input type="text" name="regname" value='{{i.name}}' \ng-model='{{i.name}}' hidden>
But regname is only the name of the input, not a binding to your scope.
The solution
Replace your ng-click register() with:
<input type="submit" name="sub2" ng-click="register(i.name)">
and then your register function should be:
$scope.register = function(name){
console.log(name);
}
P.S.
No need to use {{}} brackets in ng-model (ng-model='{{i.name}}'). Replace it with
ng-model="i.name" as shown in the docs.
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);