Question

这里的新手，请保持温柔。使用数据绑定值

时遇到了Angular过滤器的问题

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">

            Insert value to be converted to hexdecimal: <input type="text" ng-model="whatever">

            <h1>{{ whatever }}</h1>

        </div>

        <p>A custom service with a method that converts a given number into a hexadecimal number.</p>

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

            app.service('hexafy', function(x) {
                this.myFunc = function (x) {
                    return x.toString(16);
                }
            });
            app.controller('myCtrl', function($scope) {

            });
            app.filter('myFormat',['hexafy', function(hexafy) {
                return function(x) {
                    return hexafy.myFunc(x);
                };
            }]);
        </script>

    </body>
</html>

我在下面的代码行中遇到麻烦：

<h1>{{ foo | myFormat }}</h1>

为什么它不能按预期工作？

这有效：

<h1>{{ 255 | myFormat }}</h1>

这也有效：

<h1>{{ foo }}</h1>

为什么这两个组合不起作用？如何使其正常工作？预先谢谢你。

Answer 1

在自定义过滤器中处理undefined值检查。 foo的值是不确定的，您可以在服务toString的值上调用hexafy。

更新的过滤器代码

app.filter('myFormat',['hexafy', function(hexafy) {
                return function(x) {
                    if(!x){
                       return x;
                     }
                    return hexafy.myFunc(x);
                };
            }]);

Angular中的基本过滤

1 个答案: