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

【问题标题】：How do I get an AngularJS custom filter to work on user input?如何让 AngularJS 自定义过滤器处理用户输入？
【发布时间】：2016-11-01 15:44:18
【问题描述】：

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 教程中的一个示例。我已经修改了是否使用用户输入（目前未成功）。

【问题讨论】：

标签： javascript angularjs filter

【解决方案1】：

将input 输入为number 或使用parseInt，如[hexafy.myFunc(parseInt(x));]。

【讨论】：

太棒了！将 type 属性设置为“number”就可以了。但是，我还没有弄清楚在我的 JS 代码中我需要使用 parseInt 函数的位置。已在过滤器以及服务中进行了尝试。都没有奏效。此外，对于第二个问题的任何帮助（使用 JS 窗格获取代码并引用它）将不胜感激。

【解决方案2】：

这是因为用户输入后，该值不再是数字而是字符串。您可以将其更改为：

<input ng-model="my_number" type="number" />

见jsfiddle

【讨论】：