Question

通过W3schools教程开始使用AngularJS。

我试图通过创建getHex（）函数使用的输入来扩展一些示例代码，该函数使用服务hexafy。

<div ng-app="myApp" ng-controller="myCtrl">    
    <p>The hexadecimal value of <input ng-model="inputNo"/> is:</p>    
    <h1>{{getHex()}}</h1>   
</div>

<p>A custom service with a method that converts a given number into a hexadecimal number.</p>


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

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.inputNo = 255;
    $scope.getHex = function() {
        return hexafy.myFunc($scope.inputNo);   
    };
});
</script>

当页面第一次加载时，输入包含255，{{getHex（）}}呈现为ff，因此该函数似乎正常运行。

但是当我更改输入中的值时，它只是将我的输入完全返回到{{getHex（）}}而不对其进行去除。 getHex（）应该返回hexafy.myFunc的结果。

Answer 1

在发送到服务之前将$scope.inputNo转换为int

return hexafy.myFunc(parseInt($scope.inputNo));

Demo

Answer 2

在转换为十六进制之前，将发送的有效内容转换为javascript Number。

＆＃13;

var app = angular.module('myApp', []);

app.service('hexafy', function() {
  var hexafyService = {};

  var _myFunc = function(x) {
    return Number(x).toString(16);
  }

  hexafyService.myFunc = _myFunc;
  return hexafyService;
});

app.controller('myCtrl', function($scope, hexafy) {
  $scope.inputNo = 200;
  $scope.getHex = function() {
    $scope.hexNo = hexafy.myFunc($scope.inputNo);
  };
  $scope.getHex();


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <p>The hexadecimal value of <input ng-model="inputNo" ng-change="getHex()" /> is:</p>
  <h1>{{hexNo}}</h1>
</div>

<p>A custom service with a method that converts a given number into a hexadecimal number.</p>

＆＃13;

调用服务的函数仅在初始化时有效

2 个答案: