Hello,
I need to create a simple custom widget with Angular Js.
I define the app controller inside the controller
app.filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
})
to
var startFrom= $filter('filter');
startFrom([], function(input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
}
);
However, it seems not working.
The template code is
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<ul>
<li ng-repeat="item in data | filter:q |startFrom:currentPage*pageSize | limitTo:pageSize">
<div>{{item.firstname}}</div>
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous </button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>`
the controller is
`
function sds($scope, $filter) {
var ctrl = this;
$scope.startFrom=0;
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [
{
"firstname": "Studio",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.905",
"userName": "studio",
"title": "",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "",
"last_connection": "",
"password": "",
"manager_id": "0",
"id": "22",
"job_title": "Studio technical user for preview",
"last_update_date": "2018-08-13 11:27:39.599"
},
{
"firstname": "Giovanna",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.905",
"userName": "giovanna.almeida",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Almeida",
"last_connection": "",
"password": "",
"manager_id": "17",
"id": "21",
"job_title": "Account manager",
"last_update_date": "2018-06-27 13:16:04.905"
},
{
"firstname": "Daniela",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.889",
"userName": "daniela.angelo",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Angelo",
"last_connection": "",
"password": "",
"manager_id": "1",
"id": "17",
"job_title": "Vice President of Sales",
"last_update_date": "2018-06-27 13:16:04.889"
},
{
"firstname": "Walter",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.827",
"userName": "walter.bates",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Bates",
"last_connection": "2018-12-13 09:31:35.004",
"password": "",
"manager_id": "3",
"id": "4",
"job_title": "Human resources benefits",
"last_update_date": "2018-06-27 13:16:04.827"
},
{
"firstname": "Isabel",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.858",
"userName": "isabel.bleasdale",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Bleasdale",
"last_connection": "",
"password": "",
"manager_id": "11",
"id": "10",
"job_title": "Product marketing manager",
"last_update_date": "2018-06-27 13:16:04.858"
},
{
"firstname": "Jan",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.858",
"userName": "jan.fisher",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Fisher",
"last_connection": "",
"password": "",
"manager_id": "11",
"id": "9",
"job_title": "Infrastucture specialist",
"last_update_date": "2018-06-27 13:16:04.858"
},
{
"firstname": "Patrick",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.842",
"userName": "patrick.gardenier",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Gardenier",
"last_connection": "",
"password": "",
"manager_id": "5",
"id": "6",
"job_title": "Financial controller",
"last_update_date": "2018-06-27 13:16:04.842"
},
{
"firstname": "Thorsten",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.842",
"userName": "thorsten.hartmann",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Hartmann",
"last_connection": "",
"password": "",
"manager_id": "5",
"id": "8",
"job_title": "Financial planning manager",
"last_update_date": "2018-06-27 13:16:04.842"
},
{
"firstname": "Joseph",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.874",
"userName": "joseph.hovell",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Hovell",
"last_connection": "",
"password": "",
"manager_id": "12",
"id": "14",
"job_title": "Engineer",
"last_update_date": "2018-06-27 13:16:04.874"
},
{
"firstname": "William",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.795",
"userName": "william.jobs",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Jobs",
"last_connection": "",
"password": "",
"manager_id": "0",
"id": "1",
"job_title": "Chief Executive Officer",
"last_update_date": "2018-06-27 13:16:04.795"
},
{
"firstname": "Virgine",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.842",
"userName": "virginie.jomphe",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Jomphe",
"last_connection": "",
"password": "",
"manager_id": "5",
"id": "7",
"job_title": "Accountant",
"last_update_date": "2018-06-27 13:16:04.842"
},
{
"firstname": "Helen",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.827",
"userName": "helen.kelly",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Kelly",
"last_connection": "2018-07-26 15:41:40.803",
"password": "",
"manager_id": "1",
"id": "3",
"job_title": "Human resource manager",
"last_update_date": "2018-06-27 13:16:04.827"
},
{
"firstname": "Misa",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.905",
"userName": "misa.kumagai",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Kumagai",
"last_connection": "",
"password": "",
"manager_id": "17",
"id": "19",
"job_title": "Account manager",
"last_update_date": "2018-06-27 13:16:04.905"
},
{
"firstname": "Marc",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.874",
"userName": "marc.marseau",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Marseau",
"last_connection": "",
"password": "",
"manager_id": "12",
"id": "13",
"job_title": "Engineer",
"last_update_date": "2018-06-27 13:16:04.874"
},
{
"firstname": "Michael",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.874",
"userName": "michael.morrison",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Morrison",
"last_connection": "",
"password": "",
"manager_id": "1",
"id": "12",
"job_title": "Chief Technical Officer",
"last_update_date": "2018-06-27 13:16:04.874"
},
{
"firstname": "Anthony",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.889",
"userName": "anthony.nichols",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Nichols",
"last_connection": "",
"password": "",
"manager_id": "17",
"id": "18",
"job_title": "Account manager",
"last_update_date": "2018-06-27 13:16:04.889"
},
{
"firstname": "Favio",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.858",
"userName": "favio.riviera",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Riviera",
"last_connection": "",
"password": "",
"manager_id": "1",
"id": "11",
"job_title": "Vice President of Marketing",
"last_update_date": "2018-06-27 13:16:04.858"
},
{
"firstname": "April",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.811",
"userName": "april.sanchez",
"title": "Mrs",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Sanchez",
"last_connection": "",
"password": "",
"manager_id": "3",
"id": "2",
"job_title": "Compensation specialist",
"last_update_date": "2018-06-27 13:16:04.811"
},
{
"firstname": "Thomas",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.889",
"userName": "thomas.wallis",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Wallis",
"last_connection": "",
"password": "",
"manager_id": "12",
"id": "16",
"job_title": "Consultant",
"last_update_date": "2018-06-27 13:16:04.889"
},
{
"firstname": "Zachary",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.827",
"userName": "zachary.williamson",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Williamson",
"last_connection": "",
"password": "",
"manager_id": "1",
"id": "5",
"job_title": "Chief Financial Officer",
"last_update_date": "2018-06-27 13:16:04.827"
},
{
"firstname": "Norio",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.905",
"userName": "norio.yamazaki",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Yamazaki",
"last_connection": "",
"password": "",
"manager_id": "17",
"id": "20",
"job_title": "Account manager",
"last_update_date": "2018-06-27 13:16:04.905"
},
{
"firstname": "Mauro",
"icon": "icons/default/icon_user.png",
"creation_date": "2018-06-27 13:16:04.874",
"userName": "mauro.zetticci",
"title": "Mr",
"created_by_user_id": "-1",
"enabled": "true",
"lastname": "Zetticci",
"last_connection": "",
"password": "",
"manager_id": "12",
"id": "15",
"job_title": "Consultant",
"last_update_date": "2018-06-27 13:16:04.874"
}
]
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
// $scope.data.push("Item "+i);
}
$scope.$watch('q', function(newValue,oldValue){
if(oldValue!=newValue){
$scope.currentPage = 0;
}
},
;r
e);
var startFrom= $filter('filter');
startFrom([], function(input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
}
);
/*
var myApp2=angular.module('bonitasoft.ui.services',[]);
myApp2.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; // parse to int
return input.slice(start);
}
return [];
}
});*/
/*
app.filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
})*/
}