javascript - 如何让 AngularJS 自定义过滤器处理用户输入？

Question

Here is my JSFiddle.这是代码:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-init="my_number=255">
    Convert a number to hexadecimal, using a custom made service inside a custom made filter:

    <input ng-model="my_number">
    <h1>{{my_number | myFormat}}</h1>

</div>
<script>
    var app = angular.module('myApp', []);
    app.service('hexafy', function() {
        this.myFunc = function(x) {
            return x.toString(16);
        }
    });
    app.filter('myFormat', ['hexafy', function(hexafy) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);

</script>

过滤器似乎在初始化值上工作得很好(255 显示为 ff)，但是当用户更改该值时，过滤器不再工作(例如，254 显示为 254，不是预期的'fe')

我该如何解决这个问题？另外，我是 Angular 的新手，这是我第一次使用 JSFiddle。我不知道如何从 HTML 中引用 JS 窗口中的代码文件。这就是我将代码放在脚本标签中的原因。如果它在 JS 窗口中，我将如何通过 src 引用代码？

我应该补充一点，代码主要来自 w2schools AngularJS 教程中的示例。我修改了 if 以处理用户输入(到目前为止未成功)。

Answer 1

将 input 类型设为 number 或使用 parseInt ，如 [hexafy.myFunc(parseInt(x));].