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.
Related
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 in angularjs and nodejs, What i am doing is create a html file name of index.html and make a controller.js file in which printing a console.log message but getting error on browser in console box my code is as follow
<html ng-app>
<head>
<title> App </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container" ng-controller="AppCtrl">
<h1> Contact List App </h1>
<table class="table table-bordered">
<thead>
<tr>
<td> name </td>
<td> Email </td>
<td> mobile </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
and controller.js code is as follow
function AppCtrl() {
console.log("Hello Bro")
}
First of all you cannot call this a Angular App.
You dont have the module. Declare a module as follows,
var app = angular.module('todoApp', []);
Register a controller,
app.controller("dobController", ["$scope",
function($scope) {
}
You have not refered the angular reference.
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
console.log("Hello Bro");
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="col-md-20">
</div>
</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
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);
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}];
});