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

In the process of creating my initial discord bot, struggling to incorporate advanced functionalities beyond basic commands

Can you explain the distinction between using call and apply?

AngularJS Code is displayed upon page refresh or loading

What are some effective methods for locating dual edges within a Half-Edge (DCEL) data structure?

Converting JSON data into an array of a particular type in Angular

The dropdown menu adjusts its value based on the selected radio button

What is the best way to create a sliding animation on a div that makes it disappear?

What are the steps for initializing a session in Vue.js with Django upon a successful login?

stop all HTML5 videos when a specific video is played using jQuery

Generating random indexes for the Answer button to render

Methods to troubleshoot problem of angular component loading issue in firefox with ViewEncapsulation.Native

How can I terminate a parent function in NodeJS when inside a virtual function?

I need help getting my Vue.JS project to function properly when it is deployed on a server

Convert a boolean value to a string using filter in AngularJS

How to modify this to return a function and eliminate the need for declaring a function

Exploring the nesting of client components in Next.jsIf you are

How can Angular hide a global component when a particular route is accessed?

AngularJS Resource does not support array as input

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Bringing Back User Permissions to an AngularJS Application from ASP.NET Identity via OAuth and Bearer Tokens