1

i am newbie in angularjs, i am trying to develop a simple ng-grid in which the data which is coming need to be filter before displaying, so what i am trying i am trying to filter but its not giving me exact filter if filter value is '/xyz/' then it is giving me '/xyz/asd' also but i need only '/xyz/' value. '/xyz/' is folderpath where i am doing wrong can anyone help me please.

app.controller('DeatilCtrl', function($scope, $http) {
  $scope.totalServerItems = 0;
  $scope.pagingOptions = {
      pageSizes: [15, 20, 30],
      pageSize: 15,
      currentPage: 1
  };    

  $scope.filterByPath ={
          filterText : '/xyz/' 
  };
  $scope.setPagingData = function(data, page, pageSize){    
      var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
      $scope.myData = pagedData;
      $scope.totalServerItems = data.length;
      if (!$scope.$$phase) {
          $scope.$apply();
      }
  };         
  $scope.getPagedDataAsync = function (pageSize, page, searchText,folderPath) {

      setTimeout(function () {
          var data;
          var fPath = folderPath;
          if(fPath == null){
              fPath ='/';
          }
          if (searchText) {
              var ft = searchText.toLowerCase();
              $http.get('rest/files').success(function (largeLoad) {        
                  data = largeLoad.filter(function(item) {
                      return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                  });
                  $scope.setPagingData(data,page,pageSize);
              });            
          } else {
              $http.get('rest/files').success(function (largeLoad) {
                  $scope.setPagingData(largeLoad,page,pageSize);
              });
          }
      }, 100);
  };

  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

  $scope.$watch('pagingOptions', function (newVal, oldVal) {
      if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
      }
  }, true);
  $scope.$watch('filterOptions', function (newVal, oldVal) {
      if (newVal !== oldVal) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
      }
  }, true);

  var rowTempl = '<div ng-dblClick="onDblClickRow(row)" ng-style="{ \'cursor\': row.cursor   }" ng-repeat="col in renderedColumns" '+'ng-class="col.colIndex()" class="ngCell{{col.cellClass}}"><div ng-cell></div></div>';

  $scope.onDblClickRow = function(row){
      var rowData =  $scope.myData[row.rowIndex];
      var folderpath= rowData.folderPath+rowData.fileName+"/";

     $scope.getPagedDataAsync(folderpath);

  };
  $scope.gridOptions = {
      data: 'myData',

      columnDefs: [
                   { field: "fileName", displayName: "File Name"},
                   { field: "folderPath", displayName: "Full Path"}
               ],
      enablePaging: true,
        showFooter: true,
      totalServerItems: 'totalServerItems',
      pagingOptions: $scope.pagingOptions,
      filterOptions: $scope.filterByPath,
      rowTemplate: rowTempl,

  };
});

example data given by rest:

[ {
  "fileName" : "filename1",
  "folderPath" : "/xyz/"
}, {

  "fileName" : "filename2",
  "folderPath" : "/xyz/"
}, {
  "fileName" : "filename3",
  "folderPath" : "/xyz/abc/"
}, {
  "fileName" : "Resources",
  "folderPath" : "/xyz/pqr/"
}]
2
  • Can you please provide example data for what's returned by rest/files? Dec 8, 2014 at 6:02
  • when i am filtering '/xyz/' its giving me all 4 values. so how to get exact value only.
    – user4164635
    Dec 8, 2014 at 6:10

1 Answer 1

0

@Prashant try something like this:

  $http.get('rest/files').success(function (largeLoad) {
                  var fp =[];
                  for (var i = 0; i < largeLoad.length; i++) {
                      if (largeLoad[i].folderPath === '/xyz/') {
                        fp.push(largeLoad[i]);
                      }
                 $scope.setPagingData(fp,page,pageSize);
                  }
              });
2
  • 1
    i want to filter somewhere here because i want complete data at 1st time but before displaying that data in ng-grid i want to filter. because this data will be used by me again $scope.filterByPath ={ filterText : '/xyz/' };
    – user4164635
    Dec 8, 2014 at 7:06
  • 1
    You can also use regular expression $scope.filterByPath ={ filterText : '^/xyz/$' };
    – Mayur
    Dec 8, 2014 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.