0

我有這個角的應用程序,在這裏我顯示基於記錄的,帶有過濾器的表,但問題是,當我eneter在過濾器中的記錄得到過濾器的值,而是消除過濾器後,值,它不得到更新,同時還保持分頁,當我們點擊旁邊的數字不斷減少,我是新來angularjs任何幫助,將不勝感激。角結果和分頁犯規得到更新的過濾器


這是我的html代碼:

<input type="search" placeholder="Search By Any..." ng-model="search.$" /> 
table-striped table-bordered"> 
<thead> 
    <tr> 
     <th><a href="#" ng-click="changeSort('name')">User</a></th> 
     <th><a href="#" ng-click="changeSort('contentType')">Content Type</a></th> 
     <th><a href="#" ng-click="changeSort('contentName')">Content Name</a></th> 
     <th><a href="#" ng-click="changeSort('startTime')">Start Time</a></th> 
     <th><a href="#" ng-click="changeSort('endTime')">End Time</a></th> 
     <th><a href="#" ng-click="changeSort('duration')">Duration(In Secs)</a></th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="record in filteredRecords 
     | filter: search 
     | offset: currentPage*itemsPerPage 
     | limitTo: itemsPerPage 
     | orderBy:sort:reverse track by $index"> 
     <td>{{record.user}}</td> 
     <td>{{record.contentType}}</td> 
     <td>{{record.contentName}}</td> 
     <td>{{record.startTime}}</td> 
     <td>{{record.endTime}}</td> 
     <td>{{record.duration}}</td> 
    </tr> 
</tbody> 
<tfoot> 
    <td colspan="6"> 
     <div class="pagination pull-left"> 
      <ul> 
       <li ng-class="prevPageDisabled()"><a href 
        ng-click="prevPage()">« Prev</a></li> 
       <li ng-repeat="n in range()" 
        ng-class="{active: n == currentPage}" ng-click="setPage(n)"> 
        <a href="#">{{n+1}}</a> 
       </li> 
       <li ng-class="nextPageDisabled()"><a href 
        ng-click="nextPage()">Next »</a></li> 
      </ul> 
     </div> 
    </td> 
</tfoot> 

這是角碼:

angular.module("contentViewStatusApp") 
.controller("contentViewStatusController", function($scope, 
$filter,contentViewStatusService) 
{ 
var records = contentViewStatusService.list(); 

$scope.changeSort = function(value) 
{ 
    if ($scope.sort == value) 
    { 
     $scope.reverse = !$scope.reverse; 
     return; 
    } 
    $scope.sort = value; 
    $scope.reverse = false; 
} 

$scope.itemsPerPage = 8; 
$scope.currentPage = 0; 
$scope.filteredRecords = []; 
$scope.items = []; 

$scope.range = function() 
{ 
    var rangeSize = 5; 
    var ret = []; 
    var start; 

    start = $scope.currentPage; 
    if (start > $scope.pageCount() - rangeSize && $scope.pageCount() > rangeSize) 
    { 
     start = $scope.pageCount() - rangeSize + 1; 
    } 

    if($scope.pageCount() > rangeSize) 
     for (var i = start; i < start + rangeSize; i++) 
     { 
      ret.push(i); 
     } 
    else 
     for (var i = start; i < $scope.pageCount()+1; i++) 
     { 
      ret.push(i); 
     } 
    return ret; 
}; 

var filterBy = $filter('filter'); 
$scope.$watch('search', function(newValue) 
{ 
    $scope.filteredRecords = filterBy(records, newValue); 
}, true); 


$scope.prevPage = function() 
{ 
    if ($scope.currentPage > 0) 
    { 
     $scope.currentPage--; 
    } 
}; 

$scope.prevPageDisabled = function() 
{ 
    return $scope.currentPage === 0 ? "disabled" : ""; 
}; 

$scope.pageCount = function() 
{ 
    return Math.ceil($scope.filteredRecords.length/$scope.itemsPerPage) - 1; 
}; 

$scope.nextPage = function() 
{ 
    if ($scope.currentPage < $scope.pageCount()) 
    { 
     $scope.currentPage++; 
    } 
}; 

$scope.nextPageDisabled = function() 
{ 
    return $scope.currentPage === $scope.pageCount() ? "disabled" : ""; 
}; 

$scope.setPage = function(n) 
{ 
    $scope.currentPage = n; 
}; 
}); 

回答

0

@Mckenzie,爲您的方案已提供插件,你可以得到更多的出來了。

退房這個插件:ng-tablehttps://github.com/esvit/ng-table

見這個例子中它,你需要所有的工作。

ng-table combining sorting and filtering

+0

這樣的作品,非常感謝 – 2014-10-07 10:24:03

+0

@Mckenzie,很高興知道。如果您遇到任何問題,您可以通過[email protected]與我聯繫 – 2014-10-08 13:10:37