web-dev-qa-db-ja.com

AJAXデータソース、並べ替え、フィルタリングを使用したAngularjs ng-table

_ngTable directive_ をRailsアプリに適用しようとしていますが、正しく適用できません。私はまだangularの初心者であり、このディレクティブはほとんど文書化されていないようです（ただし、さまざまな素晴らしい例があります）。

したがって、必要なすべてのユーザー情報を含む_$scope.users_という配列があります（例： このように ）。これは_$resource_ query()から取得されます。

そして、私はそれを次のようなテーブルに変える必要があります：

  1. 並べ替え
  2. ページネーション
  3. 1つの入力からのフィルタリング（完了のように ここ ）

誰かが解決策または少なくともそれをすべてまとめる方法についてのアドバイスを提供できますか？

[〜＃〜]更新[〜＃〜]

それで、ircチャンネルのwafflejockの大きな助けを借りて、私はいくつかの機能をまとめることができました。これが プランク です。

まだ間違っていること：

  1. Jsonデータセットは、ページや並べ替えなどを変更するたびにリクエストされます。それは膨大な量のリクエストなので、どういうわけかキャッシュされるために必要です。
  2. コントローラーからデータセットを操作して値を変更し、必要に応じてユーザーを削除できるようにする必要があります。それを実装する方法がまだわかりません。
angularjsangularjs-directivengtable
9
Almaron

こんにちはアルマロン（別名マルカフ）私はIRCからワッフルジョックですこれが私がそれを得ることができるように最善を尽くしていることです：

http://plnkr.co/edit/TUOYmM?p=preview

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams, NameService) {

    var data = NameService.data;

    $scope.tableParams = new ngTableParams(
      {
        page: 1,            // show first page
        count: 10,           // count per page
        sorting: {name:'asc'}
      },
      {
        total: 0, // length of data
        getData: function($defer, params) {
          NameService.getData($defer,params,$scope.filter);
        }
    });

    $scope.$watch("filter.$", function () {
        $scope.tableParams.reload();
    });

});

app.service("NameService", function($http, $filter){

  function filterData(data, filter){
    return $filter('filter')(data, filter)
  }

  function orderData(data, params){
    return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
  }

  function sliceData(data, params){
    return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
  }

  function transformData(data,filter,params){
    return sliceData( orderData( filterData(data,filter), params ), params);
  }

  var service = {
    cachedData:[],
    getData:function($defer, params, filter){
      if(service.cachedData.length>0){
        console.log("using cached data")
        var filteredData = filterData(service.cachedData,filter);
        var transformedData = sliceData(orderData(filteredData,params),params);
        params.total(filteredData.length)
        $defer.resolve(transformedData);
      }
      else{
        console.log("fetching data")
        $http.get("http://www.json-generator.com/api/json/get/bUAZFEHxCG").success(function(resp)
        {
          angular.copy(resp,service.cachedData)
          params.total(resp.length)
          var filteredData = $filter('filter')(resp, filter);
          var transformedData = transformData(resp,filter,params)

          $defer.resolve(transformedData);
        });  
      }

    }
  };
  return service;  
});

基本的に、私はそれらの長い行を実行して少し読みやすくするためにいくつかの関数を設定し、次に呼び出しを行う前にデータが入力されているかどうかを確認するcachedDataオブジェクトを設定します...それでも2つの呼び出しを非常に行うようです最初はすぐに、フラグを使用してデータが既に読み込まれているかどうかを確認することでこれを回避できると確信しています。読み込まれている場合は、呼び出しをやり直すのではなく待機するだけですが、大したことではありません。

11
shaunhusain

2番目の呼び出しは、単純なif条件で防ぐことができますscope.returnListGrid.settings（）。$ scope！= null

0
ZAiD Chauhan

$http.getの2番目のパラメーターは構成オブジェクトを取ります-取るキーの1つはcacheであり、これをtrueに設定してget要求をキャッシュできます。リクエストを減らす別の方法は、_.debounce from lodash または nderscore を使用して、特定の期間内に行われたリクエストをデバウンスすることです。

データを編集するために、テンプレートで、ng-modelを使用した入力と、ng-bind（または二重中括弧{{}}）を使用したスパンを使用し、同じ変数にng-showとng-hideを使用できます。編集のためにそれら。

0
BahamutWC