Fatal编程技术网
  • javascript/
  • Javascript Angular.js和ng在模拟枚举时切换

Javascript Angular.js和ng在模拟枚举时切换

javascript angularjs enums

Javascript Angular.js和ng在模拟枚举时切换,javascript,angularjs,enums,Javascript,Angularjs,Enums,为了某种类型安全性，我想在控制器逻辑中引入一些枚举，因此，例如，我创建了如下内容： var app = angular.module('myApp', []); var StateEnum = Object.freeze({"login":1, "logout":2}) function LoginCheckCtrl($scope) { $scope.stateEnum = StateEnum $scope.loginData = StateEnum.login $sco

为了某种类型安全性，我想在控制器逻辑中引入一些枚举，因此，例如，我创建了如下内容：

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>

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

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

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

<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>
在我的示例页面中，我会有如下内容：

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>

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

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

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

<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开关。仅当我手动用整数替换
ng swith中的值时，它才起作用，例如1,2

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





现在，如您所见，第一个按钮显然不起作用，而第二个按钮起作用——这意味着当单击按钮时，它会更改按钮

我认为问题在于这个
var statenum=Object.freeze（{“login”：1，“logout”：2}）


是否可以在我的html中使用我的枚举，以便在
正常工作（如在第二小提琴中）时使用
ng开关？
我想我会创建一个可以包含所有枚举的服务：


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', []);
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>



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



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



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



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


然后，您可以在需要时注入控制器：


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


服务是单例的，因此这将有效地为您提供一组可以定义的枚举

至于ngSwitch when指令，我相信它需要一个字符串（如果我错了，请纠正我）。一些参考资料：




实现所需的另一种方法是使用
ng show
/
ng hide


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



你看过stackoverflow的答案了吗


最好的答案是从2008年开始的，所以看看更新/最新的帖子来寻找线索。当我阅读它们时，你可以得到任何你需要的原始答案，但我还没有测试过。有谁能从这篇文章中提出一个最好的答案来使用Angular吗
 我建议使用。例如：


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



我在一个名为enum的单独文件中声明了一些enum。（我用TypeScript制作了这个）在angular应用程序的控制器中，我有这样的东西：


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>



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



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



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



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


另一个文件中的枚举位于名为enums的变量中

现在你可以使用这个，甚至更具创造性：


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



下面是一个真实的示例，演示了如何使用Angular与标准JavaScript和引导程序来模拟枚举。这是为了显示订单（也称为票据）的详细信息

将枚举定义为角度常数：


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


控制器代码应如下所示：


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>



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



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



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



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


使用引导的HTML应该如下所示：


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>



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



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



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



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




{{ticket.TransNumber}}
{{enums.TicketStatusText[ticket.CurrentStatus]}


注意，在ng类中，结合引导，我们将票证模型的当前状态与enums.TicketStatusText.overriding进行比较；这将更改任何具有超限状态（2）的票据的行颜色


此外，在其中一列中，我们希望将票据状态显示为字符串，而不是整数。因此使用了：{enums.TicketStatusText[ticket.CurrentStatus]}
服务


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



不支持表达式且需要字符串或数字时的ng开关。
typescript transpiler可以在字符串和数字之间创建反向映射，这样stateEnum[1]=“login”在您的情况下（或者您可以使用实用程序函数自己创建）。
所以你可以简单地这样做，虽然有点难看，但是很干净


<div ng-controller="LoginCheckCtrl">
   <div ng-switch on="stateEnum[loginData]"> 
      <div ng-switch-when="login" ng-include="'login'"></div>
      <div ng-switch-when="logout" ng-include="'logout'"></div>
   </div>
</div>





好的，但问题不在于我如何管理我的枚举，即使服务是个好主意，问题在于“视图”-html似乎不适用于我的枚举-首先，没有匹配的情况。是否定义了外部视图？我的意思是login.html在哪里，在小提琴上做有点难，我建议你使用plunkr。我现在没有任何外部视图，所有的html都是htmlbox@Andna我认为它需要一个字符串，因此您可能需要在执行ng include的div上放置一些ng show/ng hide，而不是使用开关。这是正确的。当需要一个字符串时，使用ng开关。因此，你必须找到另一种解决方法来使用一些变通方法。这是很久以前的事了，但我终于做了一些你链接的帖子中建议的事情。Adna我对javascript不熟悉，那篇帖子中的许多建议让我不知所措。如果你已经修改了你的小提琴，对于一个新手来说，看看它会很好。。像我这样的提示：-）