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

How do I get an AngularJS custom filter to work on user input?

本文关键字：处理 用户 输入 过滤器 自定义 AngularJS      更新时间：2023-09-26

这是我的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窗口中的代码文件。这就是为什么我把代码放在脚本标记中。我将如何通过src引用代码，如果它是在JS窗口代替?

我应该补充一下，代码主要来自w2schools AngularJS教程的示例。我已经修改了它来处理用户输入(到目前为止还没有成功)。

将input类型设置为number类型，或将parseInt类型设置为[hexafy.myFunc(parseInt(x));]类型。

这是因为在用户输入之后，值不再是一个数字而是一个字符串。你可以这样修改:

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

看到jsfiddle

相关文章：