angularjs i ng-switch-kiedy - emulacji enum

Question

Chciałem wprowadzić pewne wyliczenia do mojego Logic Controller jakiegoś bezpieczeństwa typu, więc na przykład stworzyłem coś takiego:

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; 
    }; 
} 

aw moim przykładzie strona chciałbym mieć coś takiego:

<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> 

ale ng-switch-when nie chce pracować. Działa tylko wtedy, gdy ręcznie podaję wartości w ng-swith-when za pomocą liczb całkowitych, na przykład 1,2.

Oto skrzypce to wykazać:

http://jsfiddle.net/jNxyE/3/

http://jsfiddle.net/4Jg7M/2/

teraz, jak widać, pierwszy wyraźnie nie działa, a drugi działa - co oznacza, że ​​zmienia się przycisk, gdy przycisk jest kliknięty.

Problem, który moim zdaniem jest następujący: var StateEnum = Object.freeze({"login":1, "logout":2}).

Czy można używać mojego wyliczenia w moim html, więc ng-switch-when będzie działać poprawnie (jak w drugim skrzypku)?

Answer 1

myślę, że będzie stworzenie serwisu, który mógłby mieć wszystkie swoje teksty stałe:

angular.module('Enums', []). 
    factory('Enum', [ function() { 

     var service = { 
     freeze: {login:1, logout:2 }, 
      somethingelse: {abc:1,def:2} 
     }; 

    return service; 

    }]); 

Twoja definicja app byłyby tak:

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

Następnie kontrolerów można je wstrzykiwać gdy trzeba je:

function LoginCheckCtrl($scope, Enum) { 
    if (1==Enum.freeze.login) // as an example 
    if (1==Enum.somethingelse.abc) // another example 

Usługi są pojedyncze, więc to skutecznie da zestaw enum s możesz zdefiniować.

Jeśli chodzi o dyrektywę ngSwitch when, uważam, że wymaga ona ciągu (proszę poprawić mnie, jeśli się mylę). Kilka referencje:

https://groups.google.com/forum/?fromgroups#!topic/angular/EH4W0y93ZAA https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js#L171

Alternatywnym sposobem osiągnięcia tego, co chcesz byłoby użyć ng-show/ng-hide

<div ng-include="'login'" ng-show='stateEnum.login==loginData' ...> 

Answer 2

Pan spojrzał w tym odpowiedzi na stackoverflow ?: Ways to enum

Najlepsza odpowiedź pochodzi z 2008 roku, więc spójrz na nowsze/najnowsze posty dotyczące wskazówek. Czytając je, możesz uzyskać odpowiedź jako dowolny prymityw, którego potrzebujesz, ale jeszcze tego nie testowałem. Czy ktoś może zaproponować najlepszą odpowiedź do wykorzystania z Angular z tego postu?

Answer 3

Proponuję użyć angular.Module.constant. Na przykład:

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; 
}); 

Answer 4

Zadeklarowałem kilka wyrażeń w osobnym pliku o nazwie Enums.(Zrobiłem to withTypeScript) W regulatorze kątowego aplikacji mam coś takiego:

var app = angular.module("Sample", ["ngAnimate"]) 
app.controller("Messages", function ($scope, $sce, $interval, $log, $http) { 
    $scope.enums = Enums; 
}; 

Te teksty stałe w innym pliku są w var nazywa wyliczenia.

Teraz można korzystać z tego, a nawet być bardziej oszczędny:

ng-show="anotherVAr == enums.enumOne.VALUE" 

Answer 5

Oto prawdziwy przykład świat jak emulować teksty stałe za pomocą kątowa ze standardową JavaScript i Bootstrap. Ma to wyświetlić szczegóły zamówienia, zwane również biletem.

Określ swoje teksty stałe kanciastych stałych:

app = angular.module("MyApp", []) 
.constant('ENUMS', 
    { 
     TicketStatusText: { 0: 'Open', 3: 'Ready', 1: 'Closed', 2: 'Overring' }, 
     TicketStatus: {Open:0, Ready:3, Closed:1, Overring:2} 
    } 
    ) 

Kod kontroler powinien wyglądać mniej więcej tak:

app.controller("TicketsController", function ($scope, $http, ENUMS) { 
$scope.enums = ENUMS; 

Twój HTML z Bootstrap powinien wyglądać mniej więcej tak:

<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> 

Uwaga w klasie ng w połączeniu z BootStrap porównujemy aktualny stan f model biletu do wyliczenia. TicketStatusText.Overring; zmieni to kolor rzędu dla wszystkich biletów, które mają status Overring (2).

Również w jednej z kolumn chcemy wyświetlić status biletu jako ciąg, a nie jako liczbę całkowitą. Więc to służy: {{enums.TicketStatusText [ticket.CurrentStatus]}}

Answer 6

usługi

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

app.factory('Enum', function() { 
      return { 
      Action: {login:1, logout:2 }, 
      Status: {open:1, close:2} 
      }; 
     }); 

Controller

app.controller('TestController', function($scope, Enum) { 
    $scope.x = Enum.Action.logout; 
    $scope.y= Enum.Status.close; 
});