Angular.jsとNG-スイッチ-とき - 列挙

Question

をエミュレートし、私は例えば、私はこのようなものを作成して、いくつかの型の安全性のための私のコントローラロジックにいくつか列挙型を紹介したい：

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）に置き換えた場合にのみ機能します。ここで

は、この実証するフィドルです：あなたが見ることができるように、最初のものは明らかに動作しない、2つ目の作品、今

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

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

を - それは時にボタンを変更する意味しますボタンをクリックします。

私が思う問題はvar StateEnum = Object.freeze({"login":1, "logout":2})です。

私のHTMLでenumを使うことができるので、ng-switch-whenは（2番目のフィドルのように）正しく動作しますか？

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

を使用することですが、あなたはStackOverflowの上でこの答え？： Ways to enum

を見てきました

ベストアンサーは2008年のものですので、最新の/最新の投稿を見てください。私がそれらを読んで、あなたは必要なプリミティブとして答えを得ることができますが、私はまだこれをテストしていません。誰もこの記事からAngularで使用するための最良の答えを提案できますか？

Answer 3

angular.Module.constantを使用することをお勧めします。例えば、：

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

私はいくつかの列挙型をEnumsという別個のファイルに宣言しています。他のファイルに

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

列挙型は、varは列挙型と呼ばれるには、次のとおりです。私はこのような何かを持っている角度アプリのコントローラでは（私はこのwithTypeScript製）。

は今、あなたはこれを使用し、さらに創造的になります

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

Answer 5

ここでは、標準のJavaScriptとブートストラップ付きアンギュラ使用して列挙型をエミュレートする方法の現実世界の例です。これは、チケットとも呼ばれる注文の詳細を表示するためです。

角度定数として、あなたの列挙型を定義します。

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

ブートストラップであなたの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> 

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

お使いのコントローラのコードは次のようになります

ng-classでBootStrapと組み合わせて、現在のステータスoチケットモデルenums.TicketStatusText.Overringへのチケットモデル。オーバーリングステータス（2）のチケットの行の色が変わります。

また、列の1つでは、チケットのステータスを整数ではなく文字列として表示します。 {{enums.TicketStatusText [ticket.CurrentStatus]}}

Answer 6

サービス

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

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

コントローラ

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