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";
}
Related
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);
});
I am trying to display the JSON object in JSP page using angular js.
The Data is coming correctly but display code is not working properly in JSP page.
in app.js
$http.get(urlBase+'/users1').success(function (data){
for(var i=0;i<data.length;i++){
alert(data[i]);
}
$scope.users=data;
})
.error(function(data) {
alert("errore"+data);
$scope.data = "error in fetching data";
});
jsp file
<%# 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="Name"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" ng-model="City"/></td>
</tr>
<tr>
<td>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button></td>
</tr>
</table>
</div>
</div>
<div>
<table>
<div ng-repeat="user in users">
<tr>
<td>hai {{user.id}}</td>
<td>hello {{user.Name}}</td>
<td>wellcome {{user.city}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
</html>
ng-repeat is also not working here. Is there any mistake while assigning the value to scope variable? Can anyone help me to fix this?
ng-repeat="user in users" should be added to the tr tag and not the div tag.
I am creating a web app in which I have a table and a checkbox if I check the checkbox I want to show how many numbers of rows are there in my table,
like:
<table>
<thead>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
<td>other td</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="somedata in table">
<td></td>
<td></td>
</tr>
</tbody>
</table>
and here I want to print this
{{showcheckalldata}}
in my controller I have a scope variable
$scope.showcheckalldata='';
what I need to do if I want to print number of columns?
You can just assign the number of elements in the array,
$scope.showcheckalldata= table.length;
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.results = [{
"agence": "CTM",
"secteur": "Safi",
"statutImp": "operationnel"
},
{
"agence": "SMS",
"secteur": "Safi",
"statutImp": "operationnel"
}];
$scope.clickcheckall = function() {
$scope.showcheckalldata = $scope.results.length;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>
<input type="checkbox" ng-model="checkall" ng-click="clickcheckall()"/>
</td>
</tr>
<tr>
<th>Agence</th>
<th>Secteur</th>
<th>StatutImp</th>
</tr>
<tr ng-repeat="result in results">
<td>{{result.agence}}</td>
<td>{{result.secteur}}</td>
<td>{{result.statutImp}}</td>
</tr>
</table>
<h1>Total rows are : {{showcheckalldata}}</h1>
</body>
</html>
i am new to angular js, currently i display the values to view, using the appviewbatch object, i need to include controls such as list box for appviewbatch.odate with unique values and list box appviewbatch.status with unique values, upon selection of values from both the list box i need to filter and display in the table view..
could you kindly explain how can i do it.
<!DOCTYPE html>
<%# 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" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<script src="/LDODashBoard/js/scripts.js" language="JavaScript" type="text/javascript">
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/mystyle.css" />
<meta charset="utf-8">
</head>
<body>
<div align="center" style="color:white">
<table id="table1"><caption> <STRONG> AppView DisplayPage </STRONG> <br> <br> </caption>
<tr>
<td> JobName </td>
<td> Description </td>
<td> ODATE </td>
<td> StartTime </td>
<td> EndTime </td>
<td> Status </td>
<td> RunDuration </td>
<td> CyclicJob </td>
</tr>
<c:forEach items="${appviewbatch}" var="appview">
<tr>
<td> ${appview.jobName}</td>
<td> ${appview.description}</td>
<td> ${appview.oDATE}</td>
<td> ${appview.startTime}</td>
<td> ${appview.endTime}</td>
<td> ${appview.status}</td>
<td> ${appview.runDuration}</td>
<td> ${appview.cyclicJob}</td>
</tr>
</c:forEach>
</table>
<br>
<c:url value="/L1OutputDisplayPage?gcmmLink2=true" var="messageUrl2" />
Click Here
to Close
</div>
</body>
</html>
you create an array in your controller. You might populate that array from an HTTP request using Angular's $http service.
In the view, you then use ng-repeat to iterate over items / objects in the array.
check out https://docs.angularjs.org/api/ng/directive/ngRepeat#example
It doesn't work why?
this is html
ng-repeat doesn't work . I can't understand what's wrong with it . I checked everything but it still the same thing and it looks like this post is mostly code so i need to add more words to here to share this with you guys.I think this information is sufficient
<!doctype html>
<html ng-app="telebe">
<head>
<meta charset="utf-8">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet" />
<title>AngularJS Practice</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div>
<div ng-controller="BodyController as bc">
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr ng-repeat="telebe in telebeler" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
this is app.js
app = angular.module("telebe",[ ]);
app.controller("BodyController",function(){
this.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});
try changing telebeler to bc.telebeler:
<tr ng-repeat="telebe in bc.telebeler track by $index" >
<td>
{{telebe.ad}}
</td>
<td>
{{telebe.soyad}}
</td>
<td>
{{telebe.age}}
</td>
</tr>
See this plunker, its working.
simply add a track by $index in your ng-repeat refer to the update above.
See this error reference to understand it more
you forgot passing $scope parameter. Replace this with $scope while assigning telebeler value
app.controller("BodyController",function($scope){
$scope.telebeler = [{ad:'Murad',soyad:"Ramazanli",qrup:'b',id:5,age:22},{ad:'Sultan',soyad:"Esgerov",qrup:'a',id:2,age:14},{ad:'Nazim',soyad:"Memmedov",qrup:'c',id:1,age:23},{ad:'Leyla',soyad:"Semedova",qrup:'b',id:3,age:24}];
});