Does anyone know of an Angular JS directive for this project?

[smlombardi]

I love the use of this, but would prefer to use an Angular directive abated of the jQuery method. Has anyone made one?

[nakupanda]

Waiting for an AngularJS expert to take a look at this too..

[a-reznic]

need angular support +++

[ProxyTech]

+++ for Angular Support!

[nakupanda]

+1

[dyoji]

Hello, I am no expert, but I do run.

First, I made a html

<div ng-app="app.clients">
  <div ng-controller="ClientsController">
    <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
    <h5>Filtrado {{ filtered.length }} de {{ totalItems }} clientes totais</h5>
    <div ng-show="filteredItems > 0">
      <table class="table table-striped table-bordered">
        <thead>
          <th>Código&nbsp;<a ng-click="sort_by('cliCod');"><i class="glyphicon glyphicon-sort"></i></a></th>
          <th>Nome  &nbsp;<a ng-click="sort_by('cliNome');"><i class="glyphicon glyphicon-sort"></i></a></th>
        </thead>
        <tbody>
          <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
            <td>{{data.cliCod}}</td>
            <td>{{data.cliNome}}</td>
          </tr>
        </tbody>
      </table>
    </div><!-- end of ng clients found-->
    <div ng-show="filteredItems == 0">
      <h4>No customers found</h4>
    </div><!-- end of ng no clients found-->
  </div><!-- end of ng-controller -->
</div><!-- end of ng-app -->

you can put this code at the beginning of your script, outside of bootstrap onshown function.

var app = angular.module('app.clients', ['ui.bootstrap']);
      app.controller('ClientsController', function ($scope, $http, $timeout) {
          $http.get('actions/search_clients.php').success(function(data){
              $scope.list = data;
              $scope.currentPage = 1; //current page
              $scope.entryLimit = 5; //max no of items to display in a page
              $scope.filteredItems = $scope.list.length; //Initially for no filter
              $scope.totalItems = $scope.list.length;
          });
          $scope.setPage = function(pageNo) {
              $scope.currentPage = pageNo;
          };
          $scope.filter = function() {
              $timeout(function() {
                  $scope.filteredItems = $scope.filtered.length;
              }, 10);
          };
          $scope.sort_by = function(predicate) {
              $scope.predicate = predicate;
              $scope.reverse = !$scope.reverse;
          };
      });

      app.filter('startFrom', function() {
          return function(input, start) {
              if(input) {
                  start = +start; //parse to int
                  return input.slice(start);
              }
              return [];
          }
      });

and then, called my bootstrap, the secret is in the onshown function. you need to use this: document.getElementById(dialog.options.id) because angular.bootstrap don't accept another instance on the same element.

    onshown: function(dialog){
     angular.bootstrap(document.getElementById(dialog.options.id), ['app.clients']);
    },