Angular js with custom widget : uib-pagination is not working.

Q&A
1

Hello,
I created a simple custom widget with angular js.

The code is simple.
I added angular js asset.

however,** uib-pagination** didn’t appear in UI preview.
I would like to know if I miss some part.
Any help appreciated .

Thanks.

templeate:

   <input type="text" class="form-control" placeholder="Filter" ng-model="filterText">
     <ul>
     <li ng-repeat="item in filterData = (totalItems | filter : {firstname: filterText}) 
    |  limitTo:3:3*(page-1)">  <div>{{item.firstname}}</div>
    </li>
  </ul>

    <uib-pagination class="pagination-sm pagination" total-items="filterData.length" 
     ng-model="page"
     ng-change="pageChanged()" 
     previous-text="&lsaquo;" 
     next-text="&rsaquo;" 
     items-per-page=3> </uib- 
     pagination>

The controller is as follows.

     function searchP($scope) {
      $scope.page = 1;
      $scope.totalItems = [
    {
"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.displayItems = $scope.totalItems.slice(0, 3);
    this.pageChanged = function() {
    var startPos = ($scope.page - 1) * 3;
    $scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
    console.log($scope.page);
};

}

1 Like
2

i updated your widgets.
please check from https://github.com/mskutlu/paginationTest

3

Hello - I am having a hard time to check this out on my side, could you export and share this Custom Widget publically? A GitHub repository would be a great option to do so.

4

Thanks for the comment.
I uploaded form with two custom widgets on Github.https://github.com/janescloset/bonita
Thanks for your concern.

5

I checked but could not make it work either. Someone with better AngularJS skills than me might be able to make it work!

6

Thanks a lot. The widget works perfectly.

7

Great job, thank you for the contribution!