Angular.js和ng-switch-when - 模拟枚举

Question

我想为我的控制器逻辑引入一些enum用于某些类型的安全性,所以例如我创建了这样的东西:

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

在我的示例页面中,我会有这样的事情:

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

但ng-switch-when不想工作.它只有在我ng-swith-when用手动用整数替换值时才有效,例如1,2.

这里有小提琴来证明这一点:

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

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

现在,正如您所看到的,第一个显然不起作用,第二个起作用 - 意味着它在单击按钮时更改按钮.

我认为这个问题就是这个问题var StateEnum = Object.freeze({"login":1, "logout":2}).

有可能在我的HTML中使用我的枚举,所以ng-switch-when将正常工作(如第二小提琴)？

Answer 1

我想我会创建一个可以包含所有枚举的服务:

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

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

     return service;

    }]);

您的应用定义如下:

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

然后您的控制器可以在需要时注入它们:

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

服务是单身,所以这有效地为您提供了一组您可以定义的枚举.

至于指令时的ngSwitch,我认为它需要一个字符串(如果我错了,请纠正我).一对夫妇参考:

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

实现你想要的另一种方法是使用ng-show/ng-hide

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

Answer 2

这是一个真实的例子,说明了如何使用Angular和标准JavaScript以及BootStrap来模拟枚举.这是显示也称为票证的订单的详细信息.

将您的枚举定义为Angular常量:

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

您的控制器代码应如下所示:

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

使用BootStrap的HTML应如下所示:

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

请注意在ng-class中结合BootStrap,我们将票证模型的当前状态与enums.TicketStatusText.Overring进行比较.这将改变任何具有Overring状态(2)的票证的行颜色.

同样在其中一列中,我们希望将票证状态显示为字符串而不是整数.所以使用它:{{enums.TicketStatusText [ticket.CurrentStatus]}}