フィルタはデータグリッドでリフレッシュされませんAngularJS

Question

このライブラリ（https://github.com/angular-data-grid/angular-data-grid.github.io）をAngular JSで名前でフィルタリングしようとしています。問題は私がそれが更新されない検索時です！ paginateをクリックしたときにのみ、ページごとに項目を変更します。

マイHTML：ページのHTMLあたり（私はNG-変更で何かだと思う）

  <input id="orderIdFilter" type="text" class="form-control order-search-box" 
          placeholder="Enter User Name" 
          ng-change="gridActions1.filter()" 
          ng-model="name" 
          filter-by="nombre" 
          grid-id="grid1" 
          filter-type="text"> 

アイテム（私はすでにNG-変更= reloadGridを入れしようとした）

    <div class="form-group items-per-page"> 
          <label for="itemsOnPageSelect1">Items per page:</label> 
          <select id="itemsOnPageSelect1" class="form-control input-sm" 
            ng-init="paginationOptions.itemsPerPage = '5'" 
            ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()"> 
           <option>5</option> 
           <option>10</option> 
           <option>50</option> 
          </select> 
         </div> 

私のコントローラ：

var app = angular.module('myModule', ['ui.bootstrap', 'dataGrid', 'pagination']); 
app.controller('ListaComprasController',['$scope', function($scope) { 
      $scope.form = true; 
      $scope.item = {}; 
      $scope.pagingOptions = { 
       pageSizes: [5, 10, 20, 100], 
       pageSize: 3, 
       currentPage: 1 
      }; 


     $scope.itens = [ 
      {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"}, 
      {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"}, 
      {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"}, 
      {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"}, 
      {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"}, 
      {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"} 
     ]; 
      $scope.gridOptions = { 
       data: $scope.itens, //required parameter - array with data 
       //optional parameter - start sort options 
       /*sort: { 
        predicate: 'nombre', 
        direction: 'asc' 
       }*/ 
      }; 
      $scope.$watch(
       function() { 
        return { 
         currentPage: $scope.pagingOptions.currentPage, 
         pageSize: $scope.pagingOptions.pageSize 
        }; 
       }, 
       function(newVal, oldVal) { 
        // Reset to page 1 when the page size changes 
        if (newVal.pageSize !== oldVal.pageSize) { 
         $scope.pagingOptions.currentPage = 1; 
        } 

        //$scope.fillGrid($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize); 
       }, 
       true); 
     $scope.adicionaItem = function() { 
      $scope.itens.push(
       { 
        nombre: $scope.item.nombre, 
        telefono: $scope.item.telefono, 
        descripcion: $scope.item.descripcion, 
        especialidades: $scope.item.especialidades, 
        dirreccion: $scope.item.dirreccion, 
        horarioDesde: $scope.item.horarioDesde, 
        horarioHasta: $scope.item.horarioHasta, 
        checkCom: $scope.item.checkCom, 
        nombreCom: $scope.item.nombreCom, 
        apellidoCom: $scope.item.apellidoCom, 
        telefonoCom: $scope.item.telefonoCom, 
        emailCom: $scope.item.emailCom 
       } 
      ); 
      $scope.item.produto = $scope.item.quantidade = ''; 
      toastr.success("Item adicionado com sucesso."); 
      $scope.form = true; 
     }; 
     $scope.addItem = function() { 
      $scope.form = false; 
     }; 
     $scope.editarItem = function(index){ 
      $scope.form = false; 
      $scope.item = $scope.itens[index]; 
      $scope.edit = true; 
     }; 

     $scope.applyChanges = function(index){ 
      $scope.item = {}; 
      $scope.form = false; 
      $scope.edit = false; 
      toastr.success("Item alterado com sucesso."); 
     }; 
     $scope.CancelarItem = function(index){ 
      $scope.edit = false; 
      $scope.form = true; 
      $scope.item = {}; 
     }; 
     $scope.deleteItem = function(row){ 
      var index = $scope.gridOptions.data.indexOf(row.entity); 
      $scope.gridOptions.data.splice(index, 1); 
      console.log(index); 
      //$scope.itens.splice(index, 1); 
      toastr.success("Item removido com sucesso."); 
     }; 
}]); 

Answer 1

グリッドを適切に初期化するだけです。

この関数にフィルタ入力を参照：

ng-change="gridActions1.filter()" 

また、コントローラでgridActions1を定義することができる（しかし、それはそうとして、それは必須ではありません）。

$scope.gridActions1 = {}; 

次にあなたがデータグリッドの初期化でgridActions1を定義する必要があります。

grid-actions="gridActions1" 

チェック例：https://github.com/angular-data-grid/angular-data-grid.github.io/blob/master/demo/100k/index.html（ "gridActions" で検索）

ご注意：

グリッドを-actions：グリッドを更新する関数を持つコントローラのオブジェクトです。コントローラに文字列を渡したり、空のオブジェクトを作成することができます。このオブジェクトを使用して、ディレクティブのメソッド（sort（）、filter（）、refresh（））を呼び出します。

あなたも持つことができるカスタムフィルタ：https://github.com/angular-data-grid/angular-data-grid.github.io#custom-filters

作業例：返信用http://angular-data-grid.github.io/demo/bootstrap/multiple.html