Tips on dividing the information in AngularJS

Question

Tips on dividing the information in AngularJS

Sample JS code:

$scope.data={"0.19", "C:0.13", "C:0.196|D:0.23"} 
    .filter('formatData', function () {
        return function (input) {
            if (input.indexOf(":") != -1) {
                var output = input
                    .split('|')
                    .map(function (value) {
                        var splitValues = value.split(':')
                        return splitValues[0] + ':' + (Number(splitValues[1]) * 100) + "%"
                    })
                    .join()
                return output;
            } else {
                return input * 100 + "%";
            }
        }
    })

Example HTML code:

<h1 ng-repeat="item in data|formatData">{{item}}</h1>

Desired output:

"19%""C:13%""C:19.6%|D:23%"

Error encountered when running the code:

TypeError: input.indexOf is not a function

Looking for solutions to properly handle the data separation within AngularJS.

javascript angularjs

Answer 1

Answer №1

After making some adjustments to your code, I was able to achieve the desired result.

Below is the revised HTML code:

<h1 ng-repeat="x in items track by $index">{{x|customFilter}}</h1>

The values of the variables are as follows:

$scope.items=["0.19","A:0.13","B:0.196|C:0.23"];

Here is the custom AngularJS filter that I implemented:

.filter('customFilter', function () {
    return function (input) {
        if (input.indexOf(":") != -1) {
            var output = input
                .split('|')
                .map(function (val) {
                    var splitVal = val.split(':')
                    return splitVal[0] + ':' + (Number(splitVal[1]) * 100) + "%"
                })
                .join('|')
            return output;
        } else {
            return input * 100 + "%";
        }
    }
})

Answer 2

After making some adjustments to your code, I was able to achieve the desired result.

Below is the revised HTML code:

<h1 ng-repeat="x in items track by $index">{{x|customFilter}}</h1>

The values of the variables are as follows:

$scope.items=["0.19","A:0.13","B:0.196|C:0.23"];

Here is the custom AngularJS filter that I implemented:

.filter('customFilter', function () {
    return function (input) {
        if (input.indexOf(":") != -1) {
            var output = input
                .split('|')
                .map(function (val) {
                    var splitVal = val.split(':')
                    return splitVal[0] + ':' + (Number(splitVal[1]) * 100) + "%"
                })
                .join('|')
            return output;
        } else {
            return input * 100 + "%";
        }
    }
})

Answer 3

Answer №2

I have made some adjustments to your code in order to achieve the desired outcome as indicated. Please review the updated code provided below. For a clearer understanding, I have also prepared a fiddle which can be accessed here

Controller:

.controller('FilterController', function ($scope) {
  $scope.records = ["0.19","C:0.13","C:0.196|D:0.23"];
});

Filter :

.filter('filterOutput', function () {
        return function (inputArray) {
         return inputArray.map(function (input){
                 if (input.indexOf(":") != -1) {
                var out = input
                    .split('|')
                    .map(function (v) {
                        var s = v.split(':')
                        return s[0] + ':' + (Number(s[1]) * 100) + "%"
                    })
                    .join('|')
                return out;
            } else {
                return input * 100 + "%";
            }
         });
        }
    });

Answer 4

I have made some adjustments to your code in order to achieve the desired outcome as indicated. Please review the updated code provided below. For a clearer understanding, I have also prepared a fiddle which can be accessed here

Controller:

.controller('FilterController', function ($scope) {
  $scope.records = ["0.19","C:0.13","C:0.196|D:0.23"];
});

Filter :

.filter('filterOutput', function () {
        return function (inputArray) {
         return inputArray.map(function (input){
                 if (input.indexOf(":") != -1) {
                var out = input
                    .split('|')
                    .map(function (v) {
                        var s = v.split(':')
                        return s[0] + ':' + (Number(s[1]) * 100) + "%"
                    })
                    .join('|')
                return out;
            } else {
                return input * 100 + "%";
            }
         });
        }
    });

Tips on dividing the information in AngularJS

Answer №1

Answer №2

Similar questions

Guide on organizing users into groups and filtering them using Firestore's reference field type

Creating elegant Select Dropdown Box in AngularJS without relying on images

Child component in Angular2 makes an observer call to its parent object

How can you determine the number of elements that match in two arrays?

Implementing a permanent class following an incident

Express.js does not recognize the req.query value

Sending information to varying view/module - AngularJS

The image is not appearing in my small AngularJS application

Laravel validation successfully validates Vanilla AJAX request, but the controller does not receive the values

Is there a problem with textbox support for multi-line strings?

Error message: "Ajax script is failing to run"

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

The art of effectively conveying arguments to the callback function

Issue encountered: Object is not functioning properly with Node.js AuthenticationExplanation: A TypeError occurred

Display the data returned from a computed property PromiseResult using VueJS

I am experiencing some issues with my AngularJS JavaScript code. The root scope is updating correctly, but the other two scopes are not working as expected. Can

What methods can be used to disable the back button functionality within an iframe?

Sending JSON data from AngularJS to Laravel Controller through POST request

Providing an Angular Application using NginX

Struggling to make the grunt.js task for postcss with autoprefixer function properly