通过输入使 AngularJS 服务动态化答案

【问题标题】：Making AngularJS service dynamic with input通过输入使 AngularJS 服务动态化
【发布时间】：2018-10-10 12:47:12
【问题描述】：

我是 AngularJS 开发的新手。我正在尝试构建一个动态服务，它使用输入元素更新输出。但是，我每次都会出错。

我在声明服务功能时做错了什么。这是我的html代码

<div ng-app="myApp" ng-controller="myCtrl">
    <p>A custom service with a method that converts a given number into a hexadecimal number.</p>
    <label>input a number</label>
    <input ng-init="m5=0" ng-model="m5"></input>
    <p>The hexadecimal value of {{m5}} is:</p>
    <h1>{{hex}}</h1>
</div>

我的angularJS应用如下：

var app = angular.module('myApp', []);
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(parseInt($scope.m5));
});

但我的{{hex}} 输出不是动态的。它显示静态值NaN。

提前致谢

【问题讨论】：

标签： angularjs angularjs-service

【解决方案1】：

一种方法是使用ng-change directive：

<div ng-app="myApp" ng-controller="myCtrl">
    <p>A custom service with a method that converts a given number into a hexadecimal number.</p>
    <label>input a number</label>
    <input ng-init="m5=0" ng-model="m5"
           ng-change="hex=toHex(m5)" />  ̶<̶/̶i̶n̶p̶u̶t̶>̶
    <p>The hexadecimal value of {{m5}} is:</p>
    <h1>{{hex}}</h1>
</div>

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

每次更改输入值时，$scope.hex 都会更新。

如需了解更多信息，请参阅AngularJS ng-change Directive API Reference。

【讨论】：

【解决方案2】：

试试下面给定的服务代码：

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

希望这对你有用。

但我更喜欢为此使用过滤器选项。您可以尝试以下过滤器：
AngulrJS

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

//Filter to conver input number into hexadecimal number 
app.filter('hexafy', function () {
  return function(x) {
    return Number(x).toString(16);
  };
});
app.controller('myCtrl', ['$scope', 'hexafyFilter', function($scope, hexafyFilter) {
    $scope.m5 = 0;
}]);

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <p>A custom service with a method that converts a given number into a hexadecimal number.</p>
    <label>input a number</label>
    <input type="number" ng-model="m5"></input>
    <p>The hexadecimal value of {{m5}} is:</p>
    <h1>{{ m5 | hexafy }}</h1>
</div>

享受解决方案。 :)

【讨论】：