在angular HTML页面中使用Typescript枚举的正确方法(例如angular ng-class)
angular和typescript的新手。
我的typescript枚举如下
public enum MyEnum{
A = 0,
B = 1,
C = 2
}作用域变量-
$scope.myLetter: MyEnum = MyEnum.B;放入枚举检查的正确方式是什么？
选项1:比较html页面中枚举的整数值-
<div ng-class="{classA: myLetter === 0, classB: myLetter === 1, classC: myLetter === 2}">Test panel</div>选项2:从控制器作用域方法获取类名
$scope.getClass(value: myLetter): string{
if(value === MyEnum.A)
return 'classA';
if(value === MyEnum.B)
return 'classB';
if(value === MyEnum.C)
return 'classC';
}并将html元素作为-
<div ng-class='getClass(myLetter)'>Test panel</div>选项3:RyanNerd在Angular.js and ng-switch-when - emulating enum给出的答案
对于我来说，选项2更可取，其余的选项将ng-class值作为字符串进行检查，这将不会给我们提供静态类型强制。请分享您的观点或任何其他更好的选择。
回答 5
Stack Overflow用户
发布于 2015-07-30 08:35:42
从控制器作用域方法获取类名
我不喜欢让控制器知道类名的想法。
- 您可以将转换器函数添加到作用域中：
$scope.myEnumName = (value: MyEnum) => MyEnumvalue；
并在模板中使用它：
ng-class=“{‘A’：‘类A’，‘B’：‘类B’，'C':'ClassC'}myEnumName(myLetter)"
- Or添加开关功能
$scope.switchMyEnum = (value: MyEnum，cases：{ value: string: t }) => cases[MyEnumvalue]；
模板：
ng-class="switchMyEnum(myLetter，{'A':'ClassA'，'B':'ClassB'，'C':'ClassC'})
- If您只需要
myLetter开关：
$scope.switchMyLetter = (cases：{ value: string: t }) => cases[MyEnum$scope.myLetter]；
模板：
ng-class="switchMyLetter({'A':'ClassA'，'B':'ClassB'，ng-class=“要在多个作用域中使用多个枚举：
angular.module("MyApp"，[]) .run(["$rootScope"，(根：{}) => { function registerSwitchers(...enumInfos：[ string，{ value: number: string }][]) { enumInfos.forEach(enumInfo => { var switcherName = enumInfo var enumType = enumInfo1 rootswitcherName = (value: any，cases：{ value: string: any }) => cases[enumTypevalue]；})；} registerSwitchers( "switchMyEnum1"，MyEnum1，"switchMyEnum2"，MyEnum2)；}])
Stack Overflow用户
发布于 2015-07-29 23:14:49
您还可以在控制器中构建类对象，并在视图中将其设置为表达式(使用括号表示法)。
示例：-
$scope.panelClass = {};
$scope.panelClass[MyEnum.A] = 'classA';
$scope.panelClass[MyEnum.B] = 'classB';
$scope.panelClass[MyEnum.C] = 'classC';您可以将上面的代码编写为速记语法(ES6)，前提是您的typescript版本支持(具有polyfill支持)，因此您可以重写为：
$scope.panelClass = {
[MyEnum.A]:'classA',
[MyEnum.B]:'classB',
[MyEnum.C]:'classC'
};并将其用作：
<div ng-class="panelClass[myLetter]">Test panel</div>这类似于速记ng-class表达式：
<div ng-class="{0:'classA', 1:'classB', 2:'classC'}[myLetter]">Test panel</div>Stack Overflow用户
发布于 2015-07-30 18:08:01
当我们需要显式引用数值时，我们通常需要Enums。在上面的用例中，我看不到使用enums的显式用例。一个数组就可以很好地工作，如下所示：
((): void => {
var ClassConstant: string[] = ['classA', 'classB', 'classC'];
angular
.module('app', [])
.constant('ClassConstant', ClassConstant)
.controller('AppController', ($scope, ClassConstant) => {
$scope.setClass = (classname: string) => {
return ClassConstant[classname];
};
});
})();<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<div ng-class="{{setClass(myLetter)}}">1</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/31703204
复制相似问题