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.
Related
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>
How to save data from the form by clicking on the button?
I do not understand where the error is.
As planned, when you click on the data from the field stored in the variable "master"
For example I use this tutorial: http://www.w3schools.com/angular/angular_forms.asp
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="firstName"><br>
<button ng-click="copyData()">Click Me!</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {uder.firstName};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData=function(){
$scope.master1=angular.copy($scope.mas);
$scope.copyData();
}
});
</script>
</body>
</html>
First of all you have a typo error. Replace {uder.firstname} with {user.firstname}.
You should put some effort on understanding scopes and how you can use variables, that you declare on scopes.
You declare an input with ng-model="firstname", but on the controller you have a user object with the attribute firstname. You should change your form to:
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">RESET</button>
<button ng-click="copyData()">Click Me!</button>
and in your controller
app.controller('formCtrl', function($scope) {
$scope.user = { firstname:"", lastname:"" }; //init your user
$scope.master = user.firstname; //or user object itself, dont understand what exactly you would like to achieve
$scope.reset = function() {
$scope.user = $scope.master;
};
$scope.copyData=function(){ }//call your onclick event
//set the data, that you want directly here. Recursion will not work.
More information about scope and forms can definitely help you.
Firstly,There are some typos like $scope.mas and {uder.firstname}.
Inspite of that you are assigning a property to the $scope object using ng-model directive but in the controller you are trying to access it using an object called user which would be undefined at this point.Here is the change in your code
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">
RESET</button>
<button ng-click="copyData()">
Click Me!</button>
</form>
<p>
form = {{user}}</p>
<p>
master = {{master}}</p>
The controller would be like
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData = function () {
$scope.master = user.firstName;
$scope.master1=angular.copy($scope.master);
$scope.copyData();
};
Thanks to all!
A working version:
(function(angular) {
'use strict';
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
})(window.angular);
-<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="weather 2.js"></script>
</head>
<body ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
</body>
</html>
I'm a beginner, I have a simple Angular JS that's not working, I don't understand why, here is my code (the two files index.html & script.js are in the same folder):
index.html :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
script.js :
var MainController = function($scope) {
$scope.message = "Hello";
};
The ng-model is working, the name that I write in the textbox gets displayed, but I get {{message}} instead of the actual message Hello that I have in the scope of the controller.
Thank you in advance.
Name your app
<body ng-app="myApp">
Create an app.js
var app = angular.module("myApp", []);
Rename script.js to MainController.js , (Don't have to, but for a clean development)
app.controller('MainController', ['$scope', function($scope) {
$scope.message = "Hello";
}]);
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']);
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.