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();
});
Related
I want to achieve something like this :
This is what I have so far:
You can see in my case the month is repeating. I want to have the months Group by.
Here is my controller code for getlist:
Event.getList().then(function(data){
$scope.events = data.events;
$rootScope.events = data.events;
});
For live https://plnkr.co/edit/jUhSXJJEAqKnJz1H3kiv?p=preview
HTML :
<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="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="(key,x) in groupevent">
{{key|date:'MMMM yyyy'}}
<li ng-repeat="y in x |orderBy:'start_date'">
<span>{{y|json}}</span>
</li>
</ul>
</body>
</html>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.event = [
{id:'1',ex:true,end_date:'2017-08-31',start_date:'2017-08-29'},
{id:'15',ex:true,end_date:'2017-05-18',start_date:'2017-05-15'},
{id:'18',ex:true,end_date:'2017-06-12',start_date:'2017-06-09'},
{id:'51',ex:true,end_date:'2017-08-01',start_date:'2017-08-01'},
];
angular.forEach($scope.event,function(value,key){
value.groupdate = value.start_date.substring(0,7)+'-01';
});
$scope.event = _.orderBy($scope.event, ['start_date'], ['asc'])
$scope.groupevent = _.groupBy($scope.event,'groupdate');
});
On Check/Uncheck of the CheckBox , I am trying to add Or Remove the Corresponding HTML
dynamically
On Click of the One Checkbox i want to add
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('One'<br/>');
and on Click of the Two Checkbox i want to add along with One
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('Two<br/>');
I have tried as shown in below HTML ,On Uncheck but i am unable to Remove HTML
http://jsfiddle.net/9fR23/464/
Why not just use ng-repeat again to print out the values pushed in your $scope.selectedNames array?
By nature of having your repeated element be a <div> you get the line break for free. But, you could also do just as easily do <span ng-repeat="n in selectedNames">{{n}}<br /></span>
var app = angular.module('plunker', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["One", "Two", "Three"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if (index < 0) {
$scope.selectedNames.push(name);
var myEl = angular.element(document.querySelector('#divID'));
myEl.prepend('' + name + '<br/>');
} else
$scope.selectedNames.splice(index, 1);
}
});
<!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="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)" />{{n}}
</div>
<div ng-repeat="n in selectedNames">{{n}}</div>
</body>
</html>
Mirror on Plunker: http://plnkr.co/edit/pAIpY4qZpT4SvLgCaYIy?p=preview
I'm very new to Angular.js.
I'm grabbing images from a MySQL database and printing them to the screen like this:
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' ng-click='popup()'>";
On the echoed div, I have an ng-click. In app.js, this is currently what I have for the ng-click (purely for testing purposes:
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
What I'd actually like to have in that ng-click function is:
modal.style.display = "block";
I'd basically like to set the CSS of another element.
Will I need to apply ng-style in order to do this?
Using ng-style with a $scope variable you can control the display property (or any for that matter):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.display = 'inline';
$scope.setDisplayValue = function(value){
$scope.display = value;
}
});
div#test {
background: red;
}
<!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">
<div id="test" ng-style="{'display' : display}">{{display}}</div>
<hr />
<button ng-click="setDisplayValue('inline')">Set Display to inline</button>
<button ng-click="setDisplayValue('block')">Set Display to block</button>
</body>
</html>
Plunker mirror: http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw
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
Hello I'm started to learn AngrularJS from strach and I have problem with basic two modules and basic filter:
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
angular.module("myapp", []).filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
But this code gives me error : "Argument 'MyController' is not a function, got undefined"
And in HTML browser as page I saw:
{{1+1}}
Filtered: {{myData.text | myFilter:2:5}}
What is wrong with these code?
angular.module("myapp", [])
The above line defines a new module, named "myapp", and overwrite the previously defined module. If you want to get a reference to the module and add a filter to it, use
angular.module("myapp").filter(...)
You're declaring the module twice and you are missing an ending in the ng-controller-div
<!DOCTYPE html>
<html>
<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.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
app.filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
</html>