My REST API returns hundreds rows of data that looks something like this:
[
{"roman_number":"I"},
{"roman_number":"II"},
{"roman_number":"III"},
{"roman_number":"IV"}
{"roman_number":"V"},
{"roman_number":"VI"},
{"roman_number":"VII"},
{"roman_number":"VII"},
...
{"roman_number":"MMI"}
]
I'd like to be able to display the data in table like so ...
<table border=1>
<tr><td>I</td><td>II</td><td>III</td><td>IV</td></tr>
<tr><td>V</td><td>VI</td><td>VII</td><td>VIII</td></tr>
<tr><td>IX</td><td>X</td><td>XI</td><td>XII</td></tr>
<tr><td>XIII</td><td>XIX</td><td>XX</td><td>XXI</td></tr>
<tr><td colspan=4> pagination here </td></tr>
</table>
I hope that I do this in angular as I am using angular HTTP to communicate with my REST API. Thanks.
Updated based on Partha Sarathi Ghosh suggestion.
I have this app file:
var app = angular.module("myApp", ['smart-table']);
angular.module('myApp').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
if(! input ) { return; }
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
... and I have this html ...
<table>
<tr ng-repeat="row in (all_types|chunkby:5)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
... but I get this error in my console ...
Error: [$rootScope:infdig] ...
... but the data displays ok. I noticed that the plunker demo also gets this error too.
Try this custom filter
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6,7,8,9,10,11, 12,13,14,15];
});
angular.module('plunker').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
<!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 data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border=1>
<tr ng-repeat="row in (data|chunkby:4)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
</body>
</html>
Plunker Here
Related
Hello I am very new to angularjs and need some help to update each row. Let's assume that User change any of the option from dropdown box or checkbox, i need to keep track of them and pass that data to backend whenever user click "Submit". How can i achieve that ?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Need to update Row that I have changed';
$scope.submitButton = function(){
alert("please help me !!!");
}
$scope.cities = ["Austin",
"Leander",
"RoundRock"];
$scope.data = [{check:'active',firstName:'James',lastName:'Austin',city:'Leander'},
{check:'inactive',firstName:'Niki',lastName:'Jones',city:'Austin'},
{check:'active',firstName:'Amy',lastName:'Parker',city:'RoundRock'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<!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 data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table>
<thead>
<th>Active</th>
<th>First Name</th>
<th>Last Name</th>
<th> City</th>
</thead>
<tbody>
<tr ng-repeat="d in data">
<td><input type="checkbox" ng-checked="d.check=='active'"/>{{d.check}}</td>
<td>{{d.firstName}}</td>
<td>{{d.lastName}}</td>
<td><select ng-model="d.city" ng-change="showSelectValue(d.city)" ng-options="c for c in cities"></select></td>
</tr>
</tbody>
</table>
<button type="button" ng-click="submitButton()">Submit</button>
</body>
</html>
`I am very new to Angularjs and need help with updating the each row.
Whenever user change the value either checkbox or dropdown list, I need to keep track of them and pass that data to backend whenever user click save.
I am using Angularjs for my application.I am facing issue in using Pagination option.I am using dir-paginate option for creating pagination.
Here is my html
<tr data-dir-paginate="college in colleges | itemsPerPage: 10"
data-current-page="currentPage">
<td>{{$index + 1}}</td>
<td><a href="#!/collegedetails/{{college.collegeId}}">
{{college.name}}</a></td>
<td>{{college.typeName}}</td>
</tr>
Here is my Controller.js
var Controller = function($scope, $rootScope)
{
var app = angular.module('adminApp',
['angularUtils.directives.dirPagination']);
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.getAllColleges = function()
{
AdminCollegeService.getAllColleges().then(function(response){
$scope.colleges=response.data;
});
}
}
I have included dirPagination.js in my index page.But now it is displaying empty page.Sometimes it just keeps on loading continously without stopping.I am getting response from controller but i am not able to display in html.Am i missing something in the code?
I put a sample in plnk
I guessing for your code..
you need to call the getAllColleges() in somewhere.
check the link if it helps also put the code below here.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="dirpaginatio.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{colleges}}
<table class="table table-stripped" >
<tr data-dir-paginate="college in colleges | itemsPerPage: 3"
data-current-page="currentPage">
<td>{{$index + 1}}</td>
<td><a href="#!/collegedetails/{{college.collegeId}}">
{{college.name}}</a></td>
<td>{{college.typeName}}</td>
</tr>
</table>
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)" ></dir-pagination-controls>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['angularUtils.directives.dirPagination']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.currentPage = 1;
$scope.itemsPerPage = 3;
$scope.getAllColleges = function()
{
//AdminCollegeService.getAllColleges().then(function(response){
//$scope.colleges=response.data;
//});
$scope.colleges = [
{name:'one', typeName:'a'},
{name:'two', typeName:'b'},
{name:'three', typeName:'c'},
{name:'four', typeName:'d'},
{name:'five', typeName:'e'}
];
};
$scope.getAllColleges();
});
I have an ng-repeat that iterates over a document where I want to do a " | filter:search", but want the filter to run on specific fields in the document.
I found a couple examples, that just don't work.
(I have an input field with a model=search)...
The way they say you target specific fields is like this:
<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>
I remember doing something in the past and I think this is close, but not quite.
Any help?
<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div>
see this is the function : filterFn
$scope.filterFn = function(elm)
{
if($scope.filterlocation[elm.location])
{
return true;
}
return false;
};
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
first_name: 'Programmer',
last_name: '21',
},{
first_name: 'Abc',
last_name: 'Xyz'
},{
first_name: 'Kunvar',
last_name: 'Singh'
},{
first_name: 'Cnak',
last_name: '2'
}
];
})
})();
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-filter#0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>
This is an example for a table to search for eachColumn and for all colums in an input all.
Heres the example ->pnlkr
All can be done in the view.
HTML
<!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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as rchCtrl">
<div>
<label>Search</label>
<input ng-model="searchAll">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-model="searchID">
</td>
<td>
<input ng-model="searchName">
</td>
<td>
<input ng-model="searchAge">
</td>
</tr>
<tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.peoples = [
{id:1, name:'Kalesi', age:50},
{id:2, name:'Jon', age:43},
{id:3, name:'Jonas', age:34},
{id:4, name:'Sam', age:29},
{id:5, name:'Samuel', age:50},
{id:6, name:'Tyrion', age:20}
];
});
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am trying to iterate with ng-repeat, using data served from a REST service.
It works perfectly when the data is a single Json object, but when it comes to be a list of objects the HTML doesn't get the data.
Here is the code:
hello.js
function Hello($scope, $http) {
$http({ method: 'GET', url: 'http://devfz.azurewebsites.net/api/providers' }).
success(function (data) {
$scope.providers = [data];
}).
error(function () {
alert("Error");
});
}
index.html
<!DOCTYPE html>
<html ng-app lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/hello.js"></script>
<title>Bootstrap 101 Template</title>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
<div class="container theme-showcase" role="main">
<div class="jumbotron">
<div ng-controller="Hello">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="min-width: 80px;">Id</th>
<th style="min-width: 80px;">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="provider in providers">
<td>{{provider.id}}</td>
<td>{{provider.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Thanks so much :)
Your providers array contains a single element:
$scope.providers = [data]; // array containing a single element: data
If a JSON array is returned by the server, and you want to iterate over that array, then the code should be
$scope.providers = data;
after the controller definition make array providers
$scope.providers = [];
and in success callback concat data.
.success(data) {
$scope.providers = $scope.providers.concat(data)
}