Блог

Мне нужно добавить фильтр для обработки разбивки на страницы в существующем приложении,

В index.js у нас есть все

require('angular')
require('angular-ui-notification');

 var myapp= angular.module('myapp', [
'ngRoute',
'ui.bootstrap',
'ngSanitize',
'ui.bootstrap'
]);
$http.get('configuration.json').then(function (response) {
var parameters = {};
parameters = response.data;
angular.element(document).ready(function() {
    mainModule
        .controller('SimpleCtrl', require('./controllers/Simple.js'))       
        .provider('runtimeConfig', require('./services/configuration.js'))          
        .config(function ($httpProvider) {
                        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
        })
        .config(function(runtimeConfigProvider){             
        })            
        .config(function ($routeProvider) {
            $routeProvider
                .when('/', {
                    template: require('../views/myHome.html'),
                    controller: require('./controllers/myHome.js'),
        accessPolicy: { authentication: false, role: "ALL"}
                })              
        })
        })
        })
  

Для соответствующего myHome.html Мне нужно добавить разбивку на страницы, где у меня есть myHome.js файл ,

 'use strict';
module.exports = function($scope, $filter, $log, $route, $rootScope, $location, uibModal, MyService) {

}
  

где я планирую использовать приведенный ниже код.

 var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.numberOfPages=function(){
        return Math.ceil($scope.data.length/$scope.pageSize);                
    }
    for (var i=0; i<45; i  ) {
        $scope.data.push("Item " i);
    }
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start =  start; //parse to int
        return input.slice(start);
    }
});  

 <link href="http://getbootstrap.com/2.3.2/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage 1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage 1">
        Next
    </button>
</div>  

Но я не знаю, как ввести конкретный код фильтра в myHome.js,

 app.filter('startFrom', function() {
return function(input, start) {
    start =  start; //parse to int
    return input.slice(start);
}
});
  

где у меня есть мое приложение в index.js и нужно сделать разбивку на страницы из myHome.js . Пожалуйста, предложите, как использовать код для myHome.js . Я получаю приведенное ниже исключение, если пытаюсь использовать startFrom,

 bundle.annotated.js:29401 Error: [$injector:unpr] Unknown provider: 
startFromFilterProvider <- startFromFilter
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=startFromFilterProvider <-<div ng-view="" class="ng-scope">tartFromFilter
    at http://localhost:9000/bundle.annotated.js:16992:12
    at http://localhost:9000/bundle.annotated.js:21213:19
    at Object.getService [as get] (http://localhost:9000/bundle.annotated.js:21361:39)
    at http://localhost:9000/bundle.annotated.js:21218:45
    at Object.getService [as get] (http://localhost:9000/bundle.annotated.js:21361:39)
    at http://localhost:9000/bundle.annotated.js:35153:24
    at new module.exports (http://localhost:9000/bundle.annotated.js:550:18)
    at invoke (http://localhost:9000/bundle.annotated.js:21402:17)
    at Object.instantiate (http://localhost:9000/bundle.annotated.js:21410:27)
    at http://localhost:9000/bundle.annotated.js:26075:28
  

Синтаксис фильтров для добавления в качестве зависимости в контроллере таков,

filterName Filter

Eg: testFilter, reverseFilter, startFromFilter

Согласно нашему обсуждению в автономном режиме, ваш фильтр может перейти к,

 mainModule 
.filter('startFrom', function() { 
return function(input, start) { 
start =  start; //parse to int 
return input.slice(start); 
} 
})
  

 var app=angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';
    
    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)

    }
    
    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }
    
    for (var i=0; i<45; i  ) {
        $scope.data.push("Item " i);
    }
}]);

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start =  start; //parse to int
        return input.slice(start);
    }
});  

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
    <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
    <ul>
        <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage 1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage 1">
        Next
    </button>
</div>