Greetings everyone, I am new to Angular and seeking assistance. I am encountering difficulties with Angular filters when using a data-binded value.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Enter a value for conversion to hexadecimal: <input type="text" ng-model="whatever">
<h1>{{ whatever }}</h1>
</div>
<p>I have created a custom service with a method that converts a number into its hexadecimal equivalent.</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function(x) {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope) {
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
</html>
I am facing an issue with the following line of code :
<h1>{{ foo | myFormat }}</h1>
Why is it not functioning as expected?
The following line works fine :
<h1>{{ 255 | myFormat }}</h1>
This also functions correctly :
<h1>{{ foo }}</h1>
How can I resolve the combination of the two not working together? Any help is appreciated. Thank you.