How to define angular js filter in Custom widget in UI designer.

Submitted by donghee.baik on Thu, 12/13/2018 - 16:34
1
0
-1

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);
    }

})*/

}
Angular Js
Custom Widget
1 answer

Submitted by msakirkutlu_1359205 on Sat, 12/15/2018 - 07:51
1
+1
-1
This one is the BEST answer!

Hello,
add this filter code as an asset in js file. Then add required angular modules to "angular.filter", delete "startForm" from your controller. This should work.

! function (a, b, c) {
    "use strict";

b.module('startFrom', [])
  .filter('startFrom', function () {
      return function (input, offset) {
          return (input instanceof Array) 
            ? input.slice(+offset) 
            : input
      }
  }),

  b.module("angular.filter", ["startFrom"])
}(window, window.angular);

Comments

Submitted by donghee.baik on Sat, 12/15/2018 - 15:59

Thanks a lot!
It works perfectly.
I appreciate your help. :)

Permalink
Notifications