Comparing global variables in ng-switch: Best practices

Question

Comparing global variables in ng-switch: Best practices

I'm currently utilizing the AngularJS $rootScope object to expose some global constants that should be accessible to both controllers and views:

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

app.run(function ($rootScope) {
    $rootScope.myConstant = 2;
});

Rendering a global value in a view works correctly:

{{myConstant}}

Similarly, referencing the global value in an ng-if condition also functions properly:

<span ng-if="someValue == myConstant">Conditional content</span>.

However, when trying to use the same value for comparison within an ng-switch block, it never seems to evaluate to true. Check out this JSFiddle for a demonstration of my attempt to make this work. I have experimented with explicitly referencing the constant value as a member of $rootScope and as an expression (inside double curly braces), but nothing seems to work.

Any insights into what I might be doing incorrectly?

Thank you,

Tim

javascript angularjs ng-switch rootscope

Answer 1

Answer №1

To avoid using ng-switch-when, you have the option to modify the expression in ng-switch-on to generate a specific value when myConstant is equal to item.value:

<span ng-switch on="{true:'const', false: item.value}[myConstant == item.value]">
    <span ng-switch-when="const">
        <span class="blue">{{item.name}}</span> (highlighted by ng-switch) 
    </span>
    <span ng-switch-when="4">
        <span class="red">{{item.name}}</span> (highlighted by ng-switch) 
    </span>
    <span ng-switch-default>
        {{item.name}}
    </span>
</span>

See it in action here.

Answer 2

To avoid using ng-switch-when, you have the option to modify the expression in ng-switch-on to generate a specific value when myConstant is equal to item.value:

<span ng-switch on="{true:'const', false: item.value}[myConstant == item.value]">
    <span ng-switch-when="const">
        <span class="blue">{{item.name}}</span> (highlighted by ng-switch) 
    </span>
    <span ng-switch-when="4">
        <span class="red">{{item.name}}</span> (highlighted by ng-switch) 
    </span>
    <span ng-switch-default>
        {{item.name}}
    </span>
</span>

See it in action here.

Answer 3

Answer №2

If you're feeling adventurous, why not create your own solution? :)

(I can't guarantee its efficiency and it hasn't been extensively tested since I just put it together)

Check out this JSFiddle for a demo

app.directive('customSwitch', function () {
    return {
        controller: function ($scope) {
            var _value;
            this.getValue = function () {
                return _value;
            };
            this.setValue = function (value) {
                _value = value;
            };

            var _whensCount = 0;
            this.addWhen = function (value) {
                _whensCount++;
            }
            this.removeWhen = function (value) {
                _whensCount--;
            }
            this.hasWhens = function () {
                return _whensCount < -1;
            };
        },
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return scope.$eval(attrs.customSwitchOn);
            }, function (value) {
                controller.setValue(value);
            });
        }
    };   
});

app.directive('customSwitchWhen', function () {
    return {
        require: '^customSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return controller.getValue() === scope.$eval(attrs.customSwitchWhen);
            }, function (value) {
                if (value) {
                    controller.addWhen();           
                } else { 
                    controller.removeWhen();      
                }
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

app.directive('customSwitchDefault', function () {
    return {
        require: '^customSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.hasWhens, function (value) {
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

Answer 4

If you're feeling adventurous, why not create your own solution? :)

(I can't guarantee its efficiency and it hasn't been extensively tested since I just put it together)

Check out this JSFiddle for a demo

app.directive('customSwitch', function () {
    return {
        controller: function ($scope) {
            var _value;
            this.getValue = function () {
                return _value;
            };
            this.setValue = function (value) {
                _value = value;
            };

            var _whensCount = 0;
            this.addWhen = function (value) {
                _whensCount++;
            }
            this.removeWhen = function (value) {
                _whensCount--;
            }
            this.hasWhens = function () {
                return _whensCount < -1;
            };
        },
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return scope.$eval(attrs.customSwitchOn);
            }, function (value) {
                controller.setValue(value);
            });
        }
    };   
});

app.directive('customSwitchWhen', function () {
    return {
        require: '^customSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(function () {
                return controller.getValue() === scope.$eval(attrs.customSwitchWhen);
            }, function (value) {
                if (value) {
                    controller.addWhen();           
                } else { 
                    controller.removeWhen();      
                }
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

app.directive('customSwitchDefault', function () {
    return {
        require: '^customSwitch',
        template: '<span ng-transclude></span>',
        transclude: true,
        replace: true,
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.hasWhens, function (value) {
                element.attr('style', value ? '' : 'display:none;');
            });
        }
    };   
});

Comparing global variables in ng-switch: Best practices

Answer №1

Answer №2

Similar questions

A JavaScript pop-up box with two windows

organizing various kinds of data values within an array

Executing a jQuery function automatically & Invoking a jQuery function using the onClick attribute in an HTML element

Using jquery to dynamically retrieve the unique property identifier

Discovering user activity through rooms within SocketIO

Validation of the email address continually fails

I am currently seeking a way to validate if a variable corresponds to the choice made in the dropdown menu. Any suggestions on how to accomplish this task?

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

Ways to sum up the values within a JSON object

Moving specified data from one interactive table to another interactive table

JavaScript ECMAScript 6 - WARNING: "Decorators can only be applied to a class when exporting"

Having trouble with the Moment.js diff function in your React Native project?

Refresh the Angular ion-view from a different controller

React App with Material UI V1-beta Integration

"The interplay of Vue components: exploring the relationships, lifecycle hooks

I continuously encounter an issue in Vite version 3.2.4 where an error pops up stating `[vite:esbuild] The service has stopped running: write EPIPE`

Ways to stop touch events on every element but one through JavaScript

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

Exploring the Magic of Class Variable Destructuring in React

Having trouble triggering the onclick event on a dynamically created table using JavaScript