Angular.js and ng-switch-when - emulating enum
Solution 1
I think I would create a service that could have all your enums:
angular.module('Enums', []).
factory('Enum', [ function () {
var service = {
freeze: {login:1, logout:2 },
somethingelse: {abc:1,def:2}
};
return service;
}]);
Your app definition would be like this:
var app = angular.module('myApp', ['Enums']);
Then your controllers you could inject them when you need them:
function LoginCheckCtrl($scope, Enum) {
if (1==Enum.freeze.login) // as an example
if (1==Enum.somethingelse.abc) // another example
Services are singletons so this effectively will give you a set of enums you could define.
As for the ngSwitch when directive, I believe it requires a string (please correct me if I'm wrong). A couple references:
https://groups.google.com/forum/?fromgroups#!topic/angular/EH4W0y93ZAA https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js#L171
An alternate way to achieve what you want would be to use ng-show
/ng-hide
<div ng-include="'login'" ng-show='stateEnum.login==loginData' ...>
Solution 2
Here's a real world example of how to emulate enums using Angular with standard JavaScript and BootStrap. This is to display details of an order also called a ticket.
Define your enums as Angular constants:
app = angular.module("MyApp", [])
.constant('ENUMS',
{
TicketStatusText: { 0: 'Open', 3: 'Ready', 1: 'Closed', 2: 'Overring' },
TicketStatus: {Open:0, Ready:3, Closed:1, Overring:2}
}
)
Your controller code should look something like this:
app.controller("TicketsController", function ($scope, $http, ENUMS) {
$scope.enums = ENUMS;
Your HTML with BootStrap should look something like this:
<table>
<tr ng-repeat="ticket in tickets" ng-class="{danger:ticket.CurrentStatus==enums.TicketStatus.Overring}">
<td>
<strong>{{ticket.TransNumber}}</strong>
</td>
<td>
{{enums.TicketStatusText[ticket.CurrentStatus]}}
</td>
Notice in ng-class in combination with BootStrap we compare the current status of the ticket model to enums.TicketStatusText.Overring; this will change the color of the row for any tickets that have an Overring status(2).
Also in one of the columns we want to display the ticket status as a string and not as an integer. So this is used: {{enums.TicketStatusText[ticket.CurrentStatus]}}
Solution 3
Have you looked at this answer on stackoverflow?: Ways to enum
Best answer is from 2008, so look at the newer/latest posts for clues. As I read them, you can get the answer as any primitive you need but I haven't tested this yet. Can anyone suggest a best answer to use with Angular from this post?
Solution 4
I would suggest using angular.Module.constant
. For instance:
var app = angular.module('app', []);
app.constant('Weekdays', {
Monday: 1,
Tuesday: 2,
Wednesday: 3,
Thursday: 4,
Friday: 5,
Saturday: 6,
Sunday: 7
});
app.controller('TestController', function(Weekdays) {
this.weekday = Weekdays.Monday;
});
Andna
Updated on June 20, 2022Comments
-
Andna almost 2 years
I wanted to introduce some enum to my controller logic for some type safety, so for example I created something like this:
var app = angular.module('myApp', []); var StateEnum = Object.freeze({"login":1, "logout":2}) function LoginCheckCtrl($scope) { $scope.stateEnum = StateEnum $scope.loginData = StateEnum.login $scope.login = function() { console.log($scope.loginData ? 'logged in' : 'not logged in'); $scope.loginData = StateEnum.logout; }; $scope.logout = function() { console.log($scope.loginData ? 'logged in' : 'not logged in'); $scope.loginData = StateEnum.login; }; }
and in my example page I would have something like this:
<div ng-controller="LoginCheckCtrl"> <div ng-switch on="loginData"> <div ng-switch-when="stateEnum.login" ng-include="'login'"></div> <div ng-switch-when="stateEnum.logout" ng-include="'logout'"></div> </div> </div> <script type="text/ng-template" id="login"> <button ng-click="login()">Login</button> </script> <script type="text/ng-template" id="logout"> <button ng-click="logout()">Logout</button> </script>
but
ng-switch-when
does not want to work. It only works if I substitute values inng-swith-when
manually with integers, for example 1,2.Here are fiddles to demonstrate this:
now, as you can see, the first one clearly does not work, and second one works - meaning it changes button when button is clicked.
The problem I think is this
var StateEnum = Object.freeze({"login":1, "logout":2})
.Is is possible to use my enum in my html so
ng-switch-when
will work properly (as in second fiddle)? -
Andna almost 11 yearsOk, but the problem is not how I manage my enums, even if service is nice idea, the thing is that "the view" - html seems to not work with my enum - in first fiddle no case is matched.
-
lucuma almost 11 yearsDo you have external views defined? I mean where is login.html, doing it on fiddles is kind of hard, I'd suggest you use plunkr.
-
Andna almost 11 yearsI don't have any external views afaik, all the html is in html box
-
lucuma almost 11 yearsSorry yeah, must be saturday.
-
lucuma almost 11 years@Andna I believe it requires a string so you may need to look into putting some ng-show/ng-hide on the divs that do the ng-include instead of using a switch.
-
Artur Udod almost 11 yearsThat is correct. ng-switch-when expects a string. So you have to find another solution of use some workaround.
-
Andna almost 11 yearsYep, that is right, I swapped numbers to string representation of key and it worked, thanks.
-
Andna over 10 yearsIt was sometime ago but I finally done something that was suggested in the post you linked.
-
scalaGirl over 10 yearsAdna I am new to javascript and the many suggestions in that post overwhelm. If you have revised your fiddle, it would be great for a newbie to look at it..hint hint like me :-)