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 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 plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="datatables#1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add
$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;
as your first line in your controller.
here is the error message:
VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
at Object.renderDataTable (VM1134 angular-datatables.js:753)
at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
at VM1134 angular-datatables.js:910
at VM892 angular.js:13777
at completeOutstandingRequest (VM892 angular.js:4236)
at VM892 angular.js:4537
updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview
Below is my scenario.
I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are
When A is truthy, B can be either truthy or falsey
When A is falsey, B can never be truthy.
Below is my code which I tried with ng-checked, but as ng-checked doesn't allow ng-model along with it, I couldn't come up with a solution.
NOTE: I need to capture both these 2 checkboxes state in my Model
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-checked="vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
Above code uses a directive v-check which is nothing but a checkbox.
EDIT:
The template of my v-check directive:
<label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>
Thanks in advance.
Below is my solution to the problem, which also fixes the scenario as suggested by #entre in his comment.
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA" ng-click="vehicle.modelB=false"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
use ng-disabled for B:
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
I already tested this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-model="button" ng-disabled="checked">
</body>
</html>
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}];
});