Here is my JSFiddle. And here is the code:
<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>
The filter seems to work just fine on the intialized value (255 shows as ff), but when that value is changed by the user, the filter doesn't work anymore (for instance, 254 shows as 254, not the expected 'fe')
How can I fix this? Also, I'm new to Angular, and this is the first time I've used JSFiddle. I don't know how to reference the code file/s in the JS window from HTML. That's why I've put the code within script tags. How would I reference the code through src if it were in the JS window instead?
I should add that the code is mostly from an example from the w2schools AngularJS tutorial. I've modified if to work with user input (unsuccessfully so far).
