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));]。

Answer 2

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

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

请参阅jsfiddle

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

2 个答案: