I am using Spring-boot, thymeleaf and Angularjs. In my my view.html I need to recover the list "lstUsers" from my class "controller.java" using Angular.
For informations: "view.html" and "controller.java" works good. The problem is how I can fill my variable "$scope.users" with "lstUsers"
this is app.js
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($scope, $http){
$scope.users = [];
$scope.users = $lstUsers; // (lstUsers) is an object from controller.java: this not work !!!!!!!
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});
this is my view.html
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px;">
<div class="col-lg-8">
<div class="bs-component" ng-controller="listdata">
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control input-style search-input" placeholder="Search" />
</div>
</form>
<table class="table table-responsive table-hover table-striped table-bordered tablesorter">
<thead>
<tr>
<th ng-click="sort('id')">Id
<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('first_name')">First Name
<span class="glyphicon sort-icon" ng-show="sortKey=='first_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('last_name')">Last Name
<span class="glyphicon sort-icon" ng-show="sortKey=='last_name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('hobby')">Hobby
<span class="glyphicon sort-icon" ng-show="sortKey=='hobby'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</div>
</div>
<script th:src="#{/js/angular/angular.js}"></script>
<script th:src="#{/js/dirPagination.js}"></script>
<script th:src="#{/js/app.js}"></script>
</body>
this is a snippet of my controller.java
...
#RequestMapping(value = "/getSubTasks")
public ModelAndView getSubTasks(#RequestParam String issueKey) {
ModelAndView model = new ModelAndView();
.....
model.setViewName("view");
model.addObject("lstUsers", getUsers());
}
return model;
}
...
Thanks for your answer
Usually this kind of data is retrieved from the server via ajax. For example you can provide a Spring MVC Controller that returns your sub tasks as a JSON array and your angular app would need to retrieve that data from your Spring MVC Controller via ajax.
Have a look at this tutorial: https://spring.io/guides/gs/consuming-rest-angularjs/
Related
I want to show data in a table using angularjs in codeigniter.
Controller:
public function source_list_for_test(){
$data['get_source'] = $this-> admin_model-> get_all_source_list_for_test();
echo json_encode($data['get_source']);
}
Model:
function get_all_source_list_for_test() {
$this->db->select('*');
$this->db->from('source');
$query = $this->db->get();
return $query->result_array();
}
View:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div class="table-responsive" ng-app="myapp" ng-controller="tabletest">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{index + 1}}</td>
<td>{{data.name}}</td>
<td><a class="btn btn-info btn-sm btn-fill" href="">
<i class="fa fa-pencil-square-o"></i> Edit</a>
<a class="btn btn-danger btn-sm btn-edit btn-fill delete" id="" ><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="<?php echo base_url()?>app/js_code.js></script>
Js file is
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('tabletest', function($scope, $http) {
$http.get(baseUrl + "admin/source_list_for_test")
.then(function(response) {
$scope.datas = response.data;
});
});
</script>
I tried this but data not fetched and not bind in my view page.this shows below screen shoot.
enter image description here
did you check for app.js file, may be app.js not downloaded.
I'm having some issues on adding rows in a table using a button.
here is my HTML(note that i have 2 elements with the same custom directive, sure that works):
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
<exa-datepicker model="pod.startDate" required="true"disabled="true" min-mode="day"id="podStartDate"
format="yyyy-MM-dd" readonlydata="false"></exa-datepicker>
<exa-datepicker model="pod.endDate" required="true" disabled="true"
min-mode="day" id="podEndDate" format="yyyy-MM-dd"
readonlydata="false"></exa-datepicker>
<button type="button" class="btn btn-primary pull-right"
ng-click="puntualAdd()">{{'PUNTUAL_ADD' | translate}}</button>
here is my js:
$scope.puntualAdd = function (){
if($scope.pod.pod == undefined || $scope.pod.pod == null){
$scope.errorPod=true;
$scope.errorMessage.push("field_required_pod");
}
if($scope.pod.startDate == undefined || $scope.pod.startDate == null){
$scope.errorStartDate=true;
$scope.errorMessage.push("field_required_startDate");
}
if($scope.pod.endDate == undefined || $scope.pod.endDate == null){
$scope.errorEndDate=true;
$scope.errorMessage.push("field_required_endDate");
}
if($scope.errorMessage.length==0){
$scope.puntualSupply={};
$scope.puntualSupply.supply_code=$scope.pod.pod;
$scope.puntualSupply.start_date= $scope.pod.startDate.toString();
$scope.puntualSupply.end_date= $scope.pod.endDate.toString();
$scope.puntualSupply.state= "NULL";
$scope.insSupplies.push($scope.puntualSupply);
}
}
and here is have the table that shows data :
<table class="table" ng-controller="SpotDispatcherController">
<thead>
<tr>
<th class="col-order">{{'POD' | translate}}</th>
<th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
<th class="col-order">{{'VAT_NUMBER'| translate}}</th>
<th class="col-order">{{'START_DATE'| translate}}</th>
<th class="col-order">{{'END_DATE'| translate}}</th>
<th class="col-order">{{'STATE'| translate}}</th>
<th class="colf-cmd"></th>
<th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.start_date}}</td>
<td>{{row.end_date}}</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary"
ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
Note that I have previous data that is being shown in the table, and I want to add some other, but when I do that, my $scope.insSupplies take the data I wrote in the inputs, but doesn't show that in the table
No errors are given, not even in console, and I'm trying to achieve it without any <a> tag
Here is a plunkr of my code.
EDIT: instead of downvoting, you could tell me how to improve my question
Your issue is that you have ng-controller twice. You only need it once on the <body>. Also, I changed your code so that you're passing in the value you want to use puntualAdd() function. It's better practice and overall makes more sense. Hope that helps!
HTML:
<body ng-controller="SpotDispatcherController">
<ng-form>
<div class="form-inline">
<div class="row">
<div class="form-group">
<label title="POD" for="dispatcherPod">POD</label>
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
</div>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="puntualAdd(pod.pod)">PUNTUAL_ADD</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="col-order">POD</th>
<th class="col-order">DENOMINATION</th>
<th class="col-order">VAT_NUMBER</th>
<th class="col-order">STATE</th>
<th class="colf-cmd"></th>
<th class="col-order">ERROR_DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-form>
</body>
JavaScript:
var app = angular.module('plunker', []);
app.controller('SpotDispatcherController', ['$scope',
function($scope) {
$scope.insSupplies = [];
$scope.pod = [];
$scope.puntualAdd = function(input) {
$scope.insSupplies.push({
id: null,
dispatch_id:null,
supply_code: input,
magnitude:null,
stat: "NULL",
state_desc: null,
start_date_val: null,
end_date_val: null,
ext_date: null,
aut_mod: null,
date_mod: null
});
};
}
]);
Working Code: Plunkr
If your code is working fine, and your array "$scope.insSupplies" updated successfully everything should work fine.
Check this answer it might help you: How to add dynamic row to a table using angularjs
Please help me to solve this problem.This angular code works locally but can not work in django template.
I call this static files end of the body of base.html
<script src="{% static "js/angular.min.js" %}"></script>
<script src="{% static "js/restangular.min.js" %}"></script>
<script src="{% static "js/angular-ui-router.min.js" %}"></script>
This is contactlist.html
<div id="contactlist" ng-app="newApp">
<div class="container" ng-controller="angCtrl">
<h1 class="text-center">Search contact for {{myModel}}</h1>
<form>
<div class="input-group">
<input type="text" class="form-control" ng-model="myModel"
placeholder="Search Contact">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<div class="all">
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Name</th>
<th class="text-center">Contact Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist | filter:myModel |
orderBy: 'name'">
<td>{{contact.id}}</td>
<td>{{contact.name}}</td>
<td>{{contact.contact}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This is app.js
var app = angular.module('newApp', []);
app.controller('angCtrl', function($scope) {
$scope.name = "";
});
app.controller('angCtrl', function($scope) {
$scope.contactlist = [
{id:'1',name:'raisul',contact:'+8801723844330'},
{id:'2',name:'Rafikul',contact:'+8801723564330'},
{id:'3',name:'Shariful',contact:'+8801726864330'},
{id:'4',name:'kamarul',contact:'+8801723764330'},
{id:'5',name:'Ashraful',contact:'+8801728864330'},
{id:'6',name:'Jamarul',contact:'+8801723964330'},
{id:'7',name:'Rahul',contact:'+8801723861330'},
{id:'8',name:'Rashidul',contact:'+8801725864330'},
]
});
It shows the table element but can not show any data
I m using angularjs to retrieve my data in my spring web app project. it is able to retrieve and display the data in all places i have passed it using {{ }} but in my form-action link it is not able to read the value passed . what is wrong with the syntax?
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data" >
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
^
till here it displays the data using angular js
</table>
</div>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
^
here it doesnt read the data passed using angularjs
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>
Change your HTML to below way,because your ng-controller <div> tag ended before the form as the angular scope is restricted to that </div> tag itself your {{}} expression in action is not evaluated.
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data">
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
</table>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>
</div>
</div>
</div>
i don't understand what my ng-show not working when i click on my button with ng-click...
thanks for help.
<div ng-show="showMe == 1">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="showMe = 1">Ajouter</button>
</div>
</td>
</tbody>
</table>
The answer of gtlambert is true. However if you have more than one level of ng-repeat or another directive that does the same thing you'll have trouble.
To not have any trouble use objects like this :
$scope.params = {showMe:0};// init in controller
<div ng-show="params.showMe == 1">
<button ng-click="params.showMe = 1">
This will always works whatever the number of ng-repeat/directive you use.
When you use ng-repeat this creates a new scope. To access the main controller scope from inside the ng-repeat you need to use $parent.
So, change your ng-click to $parent.showMe = 1 and this will fix the problem:
<button ng-click="$parent.showMe = 1">Ajouter</button>
Here you go. I have a working example. showMe becomes a member of your controller.
function ShopController() {
this.showMe = false;
this.tableProduct = [{
id: 1,
name: "Bar"
}];
}
angular.module('app', [])
.controller('ShopController', ShopController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ShopController as shopCtrl">
<div ng-show="shopCtrl.showMe">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="shopCtrl.showMe = true">Ajouter</button>
</div>
</td>
</tbody>
</table>
</div>