agon024 agon024 - 3 months ago 22
AngularJS Question

AngularJS - ui-bootstrap pagination error

Im getting an error with ui-bootstrap pagination Unknown provider: startFromFilterProvider

Here is my controller code:

function observedCars($scope, $http, API, CarDetailService, $state) {
$http.get( API + '/car/?observed=true&offset=0&page_size=20' ).
success(function(data) {
$scope.observed = data;
});

$scope.pageSize = 5;
$scope.currentPage = 1;

$scope.selectCar = function(carId) {
CarDetailService.setCar(carId);
$state.go('taskDetails');
};
}


Here is the HTML:

<div ng-controller="observedCars">
<div ng-repeat="obv in observed['Observed CARs'] | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize" class="myCar">
<div class="carId">{{ obv['Display Name'] }}</div>
<div class="title">{{ obv['Project Title'] }}</div>
<div class="status"> {{obv.Status}} </div>
<h4><u>Current Approver</u></h4>
<div class="currApp dont-break-out">{{obv['Current Approver']}}</div>
<h4><u>Amount</u></h4>
<div class="modified">${{obv.Amount | number:2}}</div>
<div class="carBtnWrap">
<div class="viewCar"><a ng-click="selectCar(obv['CAR ID'])">View Details</a></div>
</div>
</div>

<ul uib-pagination total-items="observed['Observed CARs'].length" ng-model="currentPage" items-per-page="pageSize"></ul>

</div>


Also I should mention that it does show the right amount of button numbers in "uib-pagination" button section. So the proper amount of pages loads just not data cause of the error.

How can I fix this

Thanks

Answer

It seems that you didn't declare or define the startFrom filter. There is an exemple found here : AngularJS with AngularUI Bootsrap pagination directive doesn't hide results

app.filter('startFrom', function () {
    return function (input, start) {



        if (input === undefined || input === null || input.length === 0
         || start === undefined || start === null || start.length === 0 || start === NaN) return [];
        start = +start; //parse to int

        try {
            var result = input.slice(start);
            return result;

        } catch (e) {

        //    alert(input);
        }

    }
});