Question

我遇到过滤器问题。我有这样的文件：PostController.js，PostService.js，PostFilers.js - 我的过滤器，app.js - 路由。基本上它是一个简单的博客应用程序，我有一个对象（由'postService'返回，博客帖子看起来像这样：

var posts = [
    { id: 1, date: '21-12-2014 14:51', title: 'Blog post article title', content: 'Some content', tags: [1, 2, 3, 5], category: 1 },
    { id: 2, date: '15-11-2014 9:14', title: 'Some kind of title', content: 'Another content', tags: [2, 3, 5], category: 1}
];

正如您在标签中看到的，我有标签ID的数组，但我想显示标签名称而不是标签ID，所以我决定创建一个过滤器：

(function () {
    var app = angular.module('SimpleBlog');
    app.filter("tagName", function () {
        return function (input) {
            return input + "_test";
        };
    });
});

哪个应返回类似1_test，2_test等的内容。我尝试过这样使用它：

{{ tag | filter: tagName }}

和

{{ tag | tagName }}

但问题是这个过滤器不起作用。我没有看到任何错误，我没有看到我的Id带有“test”字符串。

我的控制器的内容如下所示：

(function () {
    var app = angular.module('SimpleBlog');
    app.controller('PostController', ['$scope', '$location', '$routeParams', 'postService',
    function ($scope, $location, $routeParams, postsService) {
// something here
    });
});

观看HTML：

<div ng-repeat="post in posts">
    <h2>{{ post.id }} - {{ post.title }}</h2>
    <h3>{{ post.date }}</h3>
    <p>{{ post.content }}</p>
    <p>Tags: 
        <span ng-repeat="tag in post.tags">
            {{ tag | filter: tagName }}
        </span>
    </p>
</div>

我必须在某处注射东西吗？希望有人能提供帮助。提前致谢。： - ）

PostService.js

(function () {
    var app = angular.module('SimpleBlog');
    app.service('postService', function () {
        var posts = [
            { id: 1, date: '21-12-2014 14:51', title: 'Blog post article title', content: 'Some content', tags: [1, 2, 3, 5], category: 1 },
            { id: 2, date: '15-11-2014 9:14', title: 'Some kind of title', content: 'Another content', tags: [2, 3, 5], category: 1 }
        ];

        return {
            getPosts: function () {
                return posts;
            }
        };
    });
})();

PostController.js

(function () {
    var app = angular.module('SimpleBlog');
    app.controller('PostController', ['$scope', '$location', 'postService',
        function ($scope, $location, postsService) {
            $scope.posts = postsService.getPosts();
        }
    ]);
})();

PostFilters.js

(function () {
    var app = angular.module('SimpleBlog');
    app.filter("tagName", function () {
        return function (input) {
            var result = input + "test";
            return result;
        };
    });
})();

问题已解决 为了防止通过变量 app 污染全局范围，我在IIFE中包含了模块定义，但最后忘记了括号。因此未调用代码，因此未注册过滤器。

当时：

(function () {
    var app = angular.module('SimpleBlog');
});

应该是：

(function () {
    var app = angular.module('SimpleBlog');
})();

Answer 1

试试这个： -

 <html>
<head>
   <title>Angular JS Views</title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>



</head>
<body>
<div ng-app="SimpleBlog" ng-controller="PostController">
<div ng-repeat="post in posts">
    <h2>{{ post.id }} - {{ post.title }}</h2>
    <h3>{{ post.date }}</h3>
    <p>{{ post.content }}</p>
    <p>Tags: 
        <span ng-repeat="tag in post.tags">
            {{ tag | tagName }}
        </span>
    </p>
</div>
</div>

<script>
angular.module('SimpleBlog', ['filters','services','controllers']);
</script>
<script src="http://abcd.com/postService.js"></script>
<script src="http://abcd.com/PostController.js"></script>
<script src="http://abcd.com/filter.js"></script>
</body>
</html>

PostControl.js

angular.module('controllers',['filters','services']).controller('PostController', ['$scope', '$location', 'postService',
    function ($scope, $location, postsService) {
        $scope.posts = postsService.getPosts();
        console.log($scope.posts);
    }
]);

postservice.js

angular.module('services',['filters','controllers']).service('postService', function () {
    var posts = [
        { id: 1, date: '21-12-2014 14:51', title: 'Blog post article title', content: 'Some content', tags: [1, 2, 3, 5], category: 1 },
        { id: 2, date: '15-11-2014 9:14', title: 'Some kind of title', content: 'Another content', tags: [2, 3, 5], category: 1 }
        ];

    return {
        getPosts: function () {
            return posts;
        }
    };
});

filter.js

angular.module('filters',['services','controllers']).filter("tagName", function () {
    return function (input) {
        var result = input + "test";

        return result;
    };
});

Answer 2

您可以在$ scope中定义过滤器函数，然后将其传递给过滤器像filter：myFunction

Answer 3

尝试更改此内容，客户过滤器无需filter关键字

来自：

<span ng-repeat="tag in post.tags">
           {{ tag | filter: tagName }}
</span>

致：

<span ng-repeat="tag in post.tags">
           {{ tag | tagName }}
</span>

AngularJS - 过滤器无法正常工作

3 个答案: