angularjs 使用过滤器/函数获取枚举数据

本文链接：https://blog.csdn.net/chadcao/article/details/40949379

尽量不要用函数

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="angular.min-1.69.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				window.scope=$scope;
				/* 班级信息 */
				$scope.selectedClass = 'c2';
				$scope.classes = [{
					id: 'c1',
					name: '一班',
				}, {
					id: 'c2',
					name: '二班',
				}];
				/* 学生信息 */
				$scope.students = [{
						id: 's1',
						name: '张三',
						gender: '0',
					},
					{
						id: 's2',
						name: '李四',
						gender: '1',
					},
					{
						id: 's3',
						name: '王五',
						gender: '2',
					}
				];
				/* 性别 */
				$scope.genders = [{
					id: 0,
					remark: '女'
				}, {
					id: 1,
					remark: '男'
				}, {
					id: 2,
					remark: '未知'
				}];
				/* 使用函数修改性别，只要$scope中有对象内容发送变化就会触发，建议不要使用 */
				$scope.getGender=function(gender){
					console.log('getGender');
					var flag = '';
					$.each($scope.genders, function(i, item) {
						if (gender == item.id) {
							flag = item.remark;
							return false;
						}
					});
					return flag;
				}
			});
			/* 使用过滤器修改性别，用window.scope解决过滤器中使用$scope对象/对象集合 */
			app.filter('genderFilter', function() {
				return function(input) {
					console.log('genderFilter');
					var flag = '';
					$.each(window.scope.genders, function(i, item) {
						if (input == item.id) {
							flag = item.remark;
							return false;
						}
					});
					return flag;
				};
			});
		</script>
	</head>
	<body ng-controller="my_controller">
		<div>
			<select ng-model="selectedClass" ng-options="s.id as s.name for s in classes">
			</select>
		</div>
		<div>
			<ul>
				<!-- 使用过滤器修改性别 -->
				<li ng-repeat="item in students" id="{{item.id}}">
				{{item.name}}-{{item.gender|genderFilter}}
				</li>
			</ul>
		</div>
		<div>
			<ul>
				<!-- 使用函数修改性别 -->
				<li ng-repeat="item in students" id="{{item.id}}">
				{{item.name}}-{{getGender(item.gender)}}
				</li>
			</ul>
		</div>
	</body>
</html>