【问题标题】:Range filter works only in first controller范围过滤器仅适用于第一个控制器
【发布时间】:2015-11-29 20:49:44
【问题描述】:

我有范围过滤器(下面的代码),它只适用于我的第一个控制器。 我在 app.js 和 html 中以相同的方式在其他控制器中添加了此过滤器,但无法正常工作,我不知道为什么?

在控制台中我没有错误。

范围过滤代码:

appPokayoke.filter('rangeFilter', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max); //Make string input int

        for (var i=min; i<max; i++)
            input.push(i);
            return input;
    };
});

我的 app.js 文件:

(function(){


    var appPokayoke = angular.module('appPokayoke', ['ngRoute', 'pyService']);

    appPokayoke.config(['$routeProvider', function($routeProvider) {

        code ...

    }]);

    appPokayoke.controller('DrawingsListCtrl', ['$scope', 'drawings', 'pantons', function ($scope, drawings, pantons) {

        code ...

    }]);

    appPokayoke.controller('DrawingDetailsCtrl', ['$scope','drawings', 'articles', '$routeParams', 'articlesOfDrawings', 'pantonClass', function ($scope, drawings, articles, $routeParams, articlesOfDrawings, pantonClass, rangeFilter ) {

        code ...

    }]);

    appPokayoke.controller('CreateArticleCtrl', ['$scope', '$http','pantons','$routeParams', 'articles', '$location', function ($scope, $http, pantons, $routeParams, articles, $location, rangeFilter) {

        code ...

    }]);

    appPokayoke.controller('CreateArticleColorsCtr', ['$scope', '$http','$routeParams', 'articles', '$location', 'articlesOfDrawings', function ($scope, $http, $routeParams, articles, $location, articlesOfDrawings, rangeFilter ) {

        code ...

    }]);

    appPokayoke.filter('rangeFilter', function() {
        return function(input, min, max) {
            min = parseInt(min); //Make string input int
            max = parseInt(max); //Make string input int

            for (var i=min; i<max; i++)
                input.push(i);
                return input;
        };
    });

})();

在 html 中:

<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th width="7%">Lp.</th>
            <th  width="10%">Article <i class="fa fa-chevron-down"></i> </th>
            <th width="10%">Colors in article</th>
            <th ng-repeat="m in [] | rangeFilter:0:pyNumber track by $index">{{$index+1}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="article in articlesOfDrawings | filter : search track by $index">
            <td>{{$index+1}}</td>
            <td ng-repeat="column in article" style="background-color: rgb({{column[1]}});"  ><p>{{ column[0] }}</p></td> 
        </tr>
    </tbody>
</table>

编辑: 过滤器不起作用的控制器代码: appPokayoke.controller('CreateArticleColorsCtr', ['$scope', '$http','$routeParams', 'articles', '$location', 'articlesOfDrawings', 函数 ($scope, $http, $routeParams, 文章, $location, articleOfDrawings, rangeFilter ) {

        var drawingId = $routeParams.drawingId;
        var pyNumber = $routeParams.pyNumber;
        console.log(pyNumber);

        $scope.rangeFilter = function(max) {
          return max = pyNumber;
        };

       $scope.articleColors = {};
       $scope.articleColorsData = {};

       articles.getNewArticle(
            $routeParams.articleName, 
            $routeParams.drawingId,
            function (data) {
                if(data !== '') {
                    $scope.articleColors = data;
                }
                else {
                    console.log('not ok articleColors');  
                }
            }
        );

        articlesOfDrawings.getArticlesOfDrawings(
            $routeParams.pyNumber, 
            $routeParams.drawingId,
            function (data) {
                if(data !== '') {
                    $scope.articlesOfDrawings = data;
                }
                else {
                    console.log('not ok articlesOfDrawings');  
                }
            }
        );


        $scope.saveArticleColors = function (articleColorsData, success) {

            success = success || function() {};

            $http.post('api/admin/articles/save_colors/', 
                articleColorsData ).success(function (data){
                console.log(data);
                    success(data.articleColorsData);
                    $scope.articleColorsData = articleColorsData;
                    console.log($scope.articleColorsData);
                    //$location.path('/drawings/'+ drawingId + '/' + pyNumber);

            }).error(function (){
                console.log('Problem ArticleColors');
            });

        }

    }]);

【问题讨论】:

  • 能否为您的代码添加 jsfiddle 或 plunker,不确定您要做什么
  • 我在这个codepen 中有工作过滤器。在这里它生成列数。或者你需要所有的代码?
  • 我可以看到它在这里工作,你能上传不工作的部分吗?或者您可以上传完整代码并指向包含非工作部分的行号
  • 我编辑并添加了控制器的代码,其中过滤器不起作用,而我使用此过滤器时的 html 已在上面添加。

标签: javascript html angularjs


【解决方案1】:

将 pyNumber 放入您的范围,以便您可以像这样从过滤器中调用它:

$scope.pyNumber = $routeParams.pyNumber;
        console.log($scope.pyNumber);

      // you don't need this function 
      //  $scope.rangeFilter = function(max) {
      //    return max = pyNumber;
      //  }; 

【讨论】:

  • 非常感谢!!这有帮助! :)
猜你喜欢
  • 1970-01-01
  • 2018-01-14
  • 2014-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-06-02
  • 1970-01-01
  • 2014-02-01
相关资源
最近更新 更多