I am trying to add data's in table by using angularjs, spring, and hibernet.
Below is the code that I am using :
addCustomer.js
var addNewCustomerModule = angular.module('addNewCustomer',[]);
var c=angular.module('addCustomerController',[]);
addNewCustomerModule.controller('addCustomerController', function ($scope,$http) {
//$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
var urlBase="http://localhost:8081/manufacturing";
var customerDetails={};
$scope.addCustomer = function addCustomer() {
customerDetails=$scope.customer;
alert("hai");
$http.post(urlBase + '/addCustomer/new/',customerDetails).
success(function(data) {
alert("Customer added");
$scope.customer = data;
});
}
});
addCustomer.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="addNewCustomer">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add Customer</title>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="<c:url value="/resources/js/addCustomer.js"/>"></script>
</head>
<body>
<div ng-controller="addCustomerController">
<table>
<tr>
<td> FirstName:</td>
<td><input type="text" ng-model="customer.firstName"/></td>
<td>LastName:</td>
<td><input type="text" ng-model="customer.lastName"/></td>
</tr>
<tr>
<td>Designation</td>
<td><input type="text" ng-model="customer.designation"/></td>
<td>Email</td>
<td><input type="text" ng-model="customer.email"/></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" ng-model="customer.phone"/></td>
<td>Fax</td>
<td><input type="text" ng-model="customer.fax"/></td>
</tr>
<tr>
<td>Website</td>
<td><input type="text" ng-model="customer.website"/></td>
<td>ContactType</td>
<td><input type="text" ng-model="customer.contact_type"/></td>
</tr>
<tr>
<td>AddressTitle</td>
<td><input type="text" ng-model="customer.addressTitle"/></td>
<td>AddressLine1</td>
<td><input type="text" ng-model="customer.addressLine1"/></td>
</tr>
<tr>
<td>AddressLine2</td>
<td><input type="text" ng-model="customer.addressLine2"/></td>
<td>City</td>
<td><input type="text" ng-model="customer.city"/></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" ng-model="customer.state"/></td>
<td>Country</td>
<td><input type="text" ng-model="customer.country"/></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" ng-model="customer.pincode"/></td>
</tr>
<tr>
<td>Type</td>
<td><input type="text" ng-model="customer.type"/></td>
<td>Name</td>
<td><input type="text" ng-model="customer.name"/></td>
</tr>
</table>
<button ng-click="addCustomer()" class="btn-panel-big">Add New Customer</button></td>
</div>
</body>
</html>
spring controller
#RequestMapping(value="/addCustomer/new/",method=RequestMethod.POST)
public String updateUser(#RequestBody Customer cu,HttpSession session) throws ParseException{
customerService.addCustomer(cu);
return "addCustomer";
}
Here $http.post(urlBase + '/addCustomer/new/',customerDetails) it doesn't call my spring controller.i checked in browser debug it says url 404 error but i have the controller for this url. i don't know how to fix this can any one help me to fix this
The issue is that your are using $http.(..).sucess() function with angular js version 1.6.X . Angular js team has removed success() and error() method from $http.
Here is the link:Why are angular $http success/error methods deprecated? Removed from v1.6?
You need to use then() function with $http. Like this:
$http.post(urlBase +'/addCustomer/new/',customerDetails).then(function(data) {
console.log(data);
},function(error){
console.log(error);
});
Related
How can i append a string to a scope and then assign a value to it in angularjs and then display the scope in html5?
Example:
HTML TAG:
<table>
<tr>
<td>Transitoria:</td>
<td>
<input type="text" ng-model="formData.transitoryAccount"
ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.transitoryAccount , 'transitoryAccount')">
</td>
<td>{{transitoryAccount.label}}</td>
</tr>
<tr>
<td>Error Account:</td>
<td>
<input type="text" ng-model="formData.errorAccount"
ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.errorAccount, 'errorAccount')">
</td>
<td>{{errorAccount.label}}</td>
</tr>
<tr>
<td>End of Year Profit:</td>
<td>
<input type="text" ng-model="formData.EOYProfitAccount"
ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.EOYProfitAccount, 'EOYProfitAccount')">
</td>
<td>{{EOYProfitAccount.label}}</td>
</tr>
</table>
In controller
scope.searchGLAccount = function(srchText, modelName) {
resourceFactory.runReportsResource.get({
reportSource: 'getAccountByAccountNo',
R_accountNo: srchText,
genericResultSet: false
}, function (data) {
scope.glAccount = data[0];
scope.modelName['.label'] = scope.glAccount.entityName;
scope.formData.modelName = scope.glAccount.entityAccountNo;
});
};
Any assistance is highly appreciated.. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('test', []);
app.controller('mine',function($scope){
$scope.transitoryAccount= {label:"Transitoria - Label"};
$scope.errorAccount= {label:"Transitoria - Label"};
$scope.EOYProfitAccount= {label:"Transitoria - Label"};
});
</script>
</head>
<body ng-app="test">
<table ng-controller="mine">
<tr>
<td>Transitoria:</td>
<td>
<input type="text" ng-model="formData.transitoryAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.transitoryAccount , 'transitoryAccount')">
</td>
<td>{{transitoryAccount.label}}</td>
</tr>
<tr>
<td>Error Account:</td>
<td>
<input type="text" ng-model="formData.errorAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.errorAccount, 'errorAccount')">
</td>
<td>{{errorAccount.label}}</td>
</tr>
<tr>
<td>End of Year Profit:</td>
<td>
<input type="text" ng-model="formData.EOYProfitAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.EOYProfitAccount, 'EOYProfitAccount')">
</td>
<td>{{EOYProfitAccount.label}}</td>
</tr>
</table>
</body>
</html>
Since the ng-keydown directive invokes thesearchGLAccount function with a string for the modelName parameter, the code needs to use a bracket notation property accessor for that parameter:
scope.searchGLAccount = function(srchText, modelName) {
resourceFactory.runReportsResource.get({
reportSource: 'getAccountByAccountNo',
R_accountNo: srchText,
genericResultSet: false
}, function (data) {
scope.glAccount = data[0];
̶s̶c̶o̶p̶e̶.̶m̶o̶d̶e̶l̶N̶a̶m̶e̶[̶'̶.̶l̶a̶b̶e̶l̶'̶]̶ ̶=̶ ̶s̶c̶o̶p̶e̶.̶g̶l̶A̶c̶c̶o̶u̶n̶t̶.̶e̶n̶t̶i̶t̶y̶N̶a̶m̶e̶;̶
scope[modelName].label = scope.glAccount.entityName;
̶s̶c̶o̶p̶e̶.̶f̶o̶r̶m̶D̶a̶t̶a̶.̶m̶o̶d̶e̶l̶N̶a̶m̶e̶ ̶=̶ ̶s̶c̶o̶p̶e̶.̶g̶l̶A̶c̶c̶o̶u̶n̶t̶.̶e̶n̶t̶i̶t̶y̶A̶c̶c̶o̶u̶n̶t̶N̶o̶;̶
scope.formData[modelName] = scope.glAccount.entityAccountNo;
});
};
Used [] Brackets to create new dynamic key modelName to scope, before adding label key defined it as object and its working. Please check the function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('test', []);
app.controller('mine',function($scope){
$scope.searchGLAccount = function(srchText, modelName) {
$scope[modelName]={};
$scope.formData={};
$scope[modelName]["label"]="test"; //added sample value as dont have this data $scope.glAccount.entityName
$scope.formData[modelName] = "test1"//$scope.glAccount.entityAccountNo
console.log($scope.transitoryAccount.label, $scope.formData.transitoryAccount)
/* resourceFactory.runReportsResource.get({
reportSource: 'getAccountByAccountNo',
R_accountNo: srchText,
genericResultSet: false
}, function (data) {
$scope.glAccount = data[0];
$scope.modelName['.label'] = $scope.glAccount.entityName;
$scope.formData.modelName = $scope.glAccount.entityAccountNo;
});*/
};
});
</script>
</head>
<body ng-app="test">
<table ng-controller="mine">
<tr>
<td>Transitoria:</td>
<td>
<input type="text" ng-model="formData.transitoryAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.transitoryAccount , 'transitoryAccount')">
</td>
<td>{{transitoryAccount.label}}</td>
</tr>
<tr>
<td>Error Account:</td>
<td>
<input type="text" ng-model="formData.errorAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.errorAccount, 'errorAccount')">
</td>
<td>{{errorAccount.label}}</td>
</tr>
<tr>
<td>End of Year Profit:</td>
<td>
<input type="text" ng-model="formData.EOYProfitAccount" ng-keydown="$event.keyCode === 13 && searchGLAccount(formData.EOYProfitAccount, 'EOYProfitAccount')">
</td>
<td>{{EOYProfitAccount.label}}</td>
</tr>
</table>
</body>
</html>
I am trying to update database using angularjs and spring.
Bellow code i was using but it is not working.
app.js
$scope.updateUserInformation=function updateUserInformation(){
alert("hai");
$http.post(urlBase+'/angular/edit/',{student:$scope.student}).success(function (data){
alert("Update Successfull");
});
}
Controller
#RequestMapping(value="/angular/edit/",method=RequestMethod.POST,params="{student}")
public String updateUser(#RequestParam("student") Angular an) throws ParseException{
String name=an.getUserame();
ts.updateUser(an);
return "AngularData";
}
jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="taskManagerApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AngularJS Task Manager</title>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="<c:url value="/resources/js/app.js"/>"></script>
</head>
<body>
<div ng-controller="taskManagerController">
<span>Add Task</span>
<div>
<div>
<table>
<tr>
<td> Name:</td>
<td><input type="text" ng-model="student.Name"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" ng-model="student.City"/></td>
</tr>
<tr>
<td>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button></td>
<td><button ng-click="updateUserInformation()" class="btn-panel-big">Update User</button></td>
</tr>
</table>
</div>
</div>
<div>
<table>
<div>
<tr ng-repeat="user in users">
<td> {{user.id}}</td>
<td> {{user.userame}}</td>
<td> {{user.city}}</td>
<td><button ng-click="updateUser(user)" class="btn-panel-big">Edit</button></td></td>
</tr>
</div>
</table>
</div>
</div>
</body>
</html>
I try to set the scope variable like $scope.student.Name=user.userame; even it is not working.how can i set the scope variable.
using the above program i try to update the database table but controller is not getting parameter can any one help me to fix this
Angular Controller
$scope.updateUserInformation=function updateUserInformation(){
alert("hai");
$http.post(urlBase+'/angular/edit/',$scope.student).success(function (data){
alert("Update Successfull");
});
}
Spring Controller
#RequestMapping(value="/angular/edit/",method=RequestMethod.POST)
public String updateUser(#RequestBody Angular an) throws ParseException{
String name=an.getUserame();
ts.updateUser(an);
return "AngularData";
}
I am new to MEAN stack and i was trying to make a simple contact app. But ng-repeat in my index.html is not working. Here is my code. Files are according to default file structure provided by Express
index.html
<html ng-app="myApp" xmlns:ng="http://www.w3.org/1999/xhtml">
<head>
<title>First Application x</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Phone Directory</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" type="text" placeholder="Enter name"></input></td>
<td><input class="form-control" type="text" placeholder="Email"></input></td>
<td><input class="form-control" type="text" placeholder="Phone No." ></input></td>
<td><button class="btn btn-danger">Add Contact</button></td>
</tr>
<tr ng-repeat="contact in contactlist">
<td class="info">{{ contact.name }}</td>
<td class="info">{{ contact.email }}</td>
<td class="info">{{ contact.phone }}</td>
<td class="info">{{ contact.phone }}</td>
</tr>
</tbody>
</table>
</div>
<script src="/javascripts/controllers/controller.js"></script>
</body>
</html>
controller.js
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl',['$scope', '$http', function($scope, $http){
$http.get('/contactlist').success(function(response){
$scope.contactlist = response;
console.log(response);
console.log("Hello World from controller");
});
}]);
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: '' });
});
router.get('/contactlist',function(req,res){
person1={
name: 'Tim',
email: 'Tim#gmail.com',
phone: '111 111 -1111'
};
person2={
name: 'Tim cook',
email: 'timcook#gmail.com',
phone: '222 111 -1111'
};
person3={
name: 'Tim Baron',
email: 'barrontim#gmail.com',
phone: '222 333 -1111'
};
var contactlist=[person1,person2,person3];
res.json(contactlist);
});
module.exports = router;
Alright!!
From express app you are passing JSON String so when you receive in ajax call it is JSON String and you need to decode into object.It can be done using JSON.parse() function.
Replace your line with below one
$scope.contactlist = JSON.parse(response);
Hope this solves your problem.
I want to use filter function and input search at the same time by using AngularJS. I can able to do with multiple functions. But I'm getting some errors while I add an textbox for search. Is there any way to do this? I tried some ways but no one did not work.
Thanks in advance.
Example code is below
var app = angular.module("app", []),
url = "http://www.filltext.com/?rows=50&pretty=true&fName={firstName}&age=[18,19,20,21]";
app.controller("controller", function($scope, $http) {
$http.get(url)
.success(function(resp) {
$scope.list = resp;
});
$scope.filterAge = function(item) {
return item.age > 19;
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Filter</title>
</head>
<body ng-controller="controller">
<div class="container">
<br>
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: filterAge">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should add custom filter to angular module instead adding filter function to your controller. This is the example:
CustomFilter:
.filter('filterByAge', function filterByAge() {
return function(array, age) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item.age > age) {
filteredArray.push(item);
}
});
return filteredArray;
}
});
HTML
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: search | filterByAge:19">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
$scope.$watch('search', function (data) {
//sorting logic
})
Watcher is waiting for any action taken on search filed then the function is executed.
At first i get the data in the begining but after posting some new students i want the array to update and it updates but table doesn't and i dont know why .It suppose to be like this or what?
This is the html
<!DOCTYPE html>
<html lang="en" ng-app="ang">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<title>Angular Practice </title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
div{
overflow:auto;
margin:5px;
}
</style>
</head>
<body ng-controller="TableController as bc">
<div style="margin:5px auto;width:810px">
<div style="width:250px;float:left;">
<form name="forma" novalidate ng-submit="forma.$valid&&bc.sendmes()">
<table class="table table-responsive table-hover">
<tr>
<th colspan="2">Add a new Student</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="bc.telebe.name" class="input-sm" required /></td>
</tr>
<tr>
<td>Surname</td>
<td><input type="text" ng-model="bc.telebe.surname" class="input-sm" required /></td>
</tr>
<tr>
<td>Age</td>
<td><input type="number" ng-model="bc.telebe.age" class="input-sm" required /></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="Submit" class="btn-sm" /></th>
</tr>
</table>
</form>
</div>
<div style="width:550px;">
<table ng-controller="TableController as bc" class="table table-responsive table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in bc.telebeler">
<td>{{telebe.name}}</td>
<td>{{telebe.surname}}</td>
<td>{{telebe.age}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
This is app.js
app=angular.module("ang",[ ]);
app.controller("TableController",function($http){
var bu = this;
this.telebe = {}
bu.telebeler = [ ];
$http.get("getjson.php").success(function(data){
bu.telebeler = data;
});
this.sendmes=function(){
$http.post("getjson.php",this.telebe).success(function(data){
bu.telebeler = data;
console.log(bu.telebeler);
bu.telebe = {};
});
};
});
This is the getjson.php and this file is clear no problem with php
<?php
require("config.php");
header("Content-type:text/json");
if($s = file_get_contents("php://input")){
$ar=json_decode($s,true);
$name = htmlspecialchars($ar['name']);
$surname = htmlspecialchars($ar['surname']);
$age = htmlspecialchars($ar['age']);
mysql_query("INSERT INTO telebe(name,surname,age) VALUES('$name','$surname','$age')");
};
$tema = mysql_query("SELECT * FROM telebe");
$array = array();
while($sira = mysql_fetch_assoc($tema))$array[]=$sira;
echo json_encode($array);
?>
Remove ng-controller="TableController as bc" directive from the table tag. The controller is already defined in body.
Currently, you have two controllers with different scopes, each of them sending its own HTTP request to get the initial data. When you are changing the data, only the outer controller is updated but you are reading them from the inner controller. Removing the inner controller will fix the problem.
You should insert $scope to your controller and define objects for view on the scope rather then on the controller:
app.controller("TableController",function($scope, $http){
$scope.telebe = {};
$scope.telebeler = [];
...
}
and then in html you should point to the scope like this:
<tr ng-repeat="t in telebeler">
That should make it work.