I'm a newbie with AngularJS i want to retrive all products in an html page but it shows nothing even if '/allProd' works perfectly without angular
app.js
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data;
});
});
index.html
<html data-ng-app="crm" >
<head>
<meta charset="ISO-8859-1">
<title>Catalog</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body data-ng-controller="CRMController">
<table class="table">
<thead>
<tr>
<th> REF </th><th> DES </th><th> PRICE </th>
</tr>
</thead>
<tbody >
<tr data-ng-repeat="p in products.content">
<td>{{p.reference}}</td>
<td>{{p.designation}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
What i got
PS: I'm using angular 1.5.6 and spring-boot 1.5.2.RELEASE
According to the documentation for $http the actual response body is in the data property of the response.
$http.get('/allProd')
.then(function(response){
$scope.products = response.data;
});
You will have to do
$scope.products = response.data
Also in your ng-repeat you have to mention an array, but it seems your initialization and assignment are not in sync for $scope.products in the controller.
If response.data.products is not an array, there is no point declaring $scope.products as an array
It is because data received on success has another property called data inside, which actually holds the required Products data.
try changing the code to
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data.data;
});
});
After changing in your .js file:
$scope.products=data.data;
Then, change your .html file from "p in products.content"
to the following:
"p in products"
You don't need .content. because .content is no part of data structure.
Related
I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. When I try to inject the pagination directive, the application doesn't work, where it shows only the navigation bar.
I've followed this tutorial.
Moreover, the console doesn't show any error.
Below are the files where I'm trying to implement the pagination:
main.html:
<div class="page-header">
<h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
<table class="table striped">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Created At</th>
<!--<th>Status</th>-->
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
<td>{{user.last_name}}</td>
<td>{{user.first_name}}</td>
<td>{{user.created_at}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>
main.js:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];
function UsersList($scope, userDataFactory){
$scope.users = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
// Get the list of users
userDataFactory.userList().then(function(response) {
$scope.users = response.data;
});
}
user-data-factory.js:
angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);
function userDataFactory($http) {
return {
userList: userList
};
function userList() {
return $http.get("users.json").then(complete).catch(failed);
}
function complete(response) {
return response;
}
function failed(error) {
console.log(error.statusText);
}
}
dir-paginate is declared in the file below:
<html ng-app="Js-Users-App">
<head>
<meta charset="utf-8">
<title>Js Users</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#/" class="brand-logo">Js Users</a>
<ul class="right hide-on-med-and-down">
<li>Add</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Add</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
<!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
<script src="js/dirPagination.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>
</body>
</html>
And the script is located inside the js folder.
The application is running on a simple web server, started with python -m SimpleHTTPServer.
I can't find the problem. Also because I still don't know how to debug very well. Is it because the application is not loading the new directive? Thanks.
UPDATE 1
I've made a plunk to show you the project structure and the entire code: http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD
ng-app shouldn't be defined on <html> element, unless proven otherwise. This can result in undesirable behaviour when jQuery is loaded.
jQuery should be loaded before Angular and other dependencies that may use of it (Materialize).
Js-Users-App module is being redefined:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
This eliminates router configuration, so the application does nothing. The module should be defined once, with all module dependencies:
angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])
After that angular.module("Js-Users-App") should be used only as a getter (no second argument).
UsersList controller injects angularUtils.directives.dirPagination for no good reason, this will result in error because there's no such service - it's a directive. It should be omitted.
After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx#yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www#yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz#yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>
First you must have a function (eg ngFunction) and then try:
<button id="something" ng-click="ngFunction(doSomething)">
Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.
I am using express js framework. I am not able to include javascript file in ejs page.
//This is my index.ejs page
<!DOCTYPE html>
<html>`
<head>
<script type='text/javascript' src= "order.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-app="myApp" ng-controller="orderCtrl">
<div class="container">
<table class="table table-striped">
<thead><tr>
<th>Item Name</th>
<th>Price</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
</div>
</body>
</html>
//This is my JavaScript page order.js which should connect to index.ejs
var app = angular.module('myApp', []);
angular.module('myApp', []).controller('orderCtrl', function($scope) {
$scope.message = 'Hello World!';
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{ fName:'Hege',lName:"Pege" },
{ fName:'Kim',lName:"Pim" },
{ fName:'Sal',lName:"Smith" },
{ fName:'Jack',lName:"Jones" },
{ fName:'John',lName:"Doe" },
{ fName:'Peter',lName:"Pan" }
];
})
I am not able to display the data here {{ user.fName }}. Could someone please help.
You have to include angular in your HTML inside the head in a script tag :
<script type='text/javascript' src= "anularpath/angular.js"></script>
you can use angular cdn in your case if you dont have the file locally like this :
<head>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
and you should move your order.js file script tag to the bottom of the body right before you close the body tag. like this :
<script type='text/javascript' src= "order.js"></script>
</body>
</html>
I used angular datatables with fixed column, my HTML code for view as the following:
<div class="row" ng-controller="PerformanceCtrl">
<table id="example" datatable=""
class="stripe row-border order-column"
dt-options="dtOptions">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
</tr>
</tbody>
</table>
And my controller code as the following:
'use strict';
app.controller('PerformanceCtrl', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('scrollY', '300px')
.withOption('scrollX', '100%')
.withOption('scrollCollapse', true)
.withOption('paging', false)
.withFixedColumns({
leftColumns: 1
});
}]);
And for my index.html file, I included datatables libraries as the following order:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="modules/performance/controller.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css">
<script src="bower_components/DataTables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/DataTables/media/css/jquery.dataTables.min.css">
And This my module:
var app = angular.module('MyApp', ['datatables', 'datatables.fixedcolumns']);
But I got this error undefined is not a function as this image:
If I removed the following code from options of table, No error but no fixedColumns:
.withFixedColumns({
leftColumns: 1
});
I need to make my first column fixed, How can I fix this error ?
I post this question on github, and l-lin answer on it.
I missed including the following:
<script src="vendor/FixedColumns-3.0.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/FixedColumns-3.0.4/css/dataTables.fixedColumns.min.css">
I should download the FixColumns jQuery.
You just forgot to add the ng attribute to the datatables.
Below is working Screen shot ...
Click here for Live Demo
I am building an application using Meteor. I am using the jquery datatables plugin to render a table of data.
https://www.datatables.net/
When my table loads, ALL of the data is loaded, instead of the default 'show 10 entries'. Furthermore, when I click on a column to sort, all of the data disappears and becomes "No data available in table".
Here is my html:
<template name="Tires">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
</head>
<script>
//$(document).ready( function () {
//$('#tires').DataTable();
//});
</script>
<h1>tires</h1>
<br>
<table id="tires">
<thead>
<tr>
<th>Brand</th>
</tr>
</thead>
<tbody>
{{#each products}}
<tr>
<td>{{brand}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my template helpers page:
Template.Tires.onRendered(function() {
$('#tires').DataTable();
alert('rendred!');
});
Note - for development purposes, I am only showing the "Brand" column for now... Does anyone have any idea what might be going on?