angularjs ng-repeat

最新推荐文章于 2020-08-06 16:19:04 发布

曹振华

最新推荐文章于 2020-08-06 16:19:04 发布

阅读量1.1k

点赞数

分类专栏： angularjs 文章标签： angularjs ng-repeat

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

版权

angularjs 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="my_app">

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.students = [{
						studentno: 's001',
						studentname: '1班,学生1',
						classno: 'c001',
						age: 16,
					},
					{
						studentno: 's001',
						studentname: '2班,学生1',
						classno: 'c002',
						age: 17,
					},
					{
						studentno: 's002',
						studentname: '1班,学生2',
						classno: 'c001',
						age: 18,
					},
					{
						studentno: 's002',
						studentname: '2班,学生2',
						classno: 'c002',
						age: 19,
					},
					{
						studentno: 's003',
						studentname: '2班,学生3',
						classno: 'c002',
						age: 20,
					},
				];
				$scope.getStudent = function(studentno) {
					alert(studentno);
				}
				$scope.myFilter = function(item) {
					return item.classno == 'c001' && item.age > 16;
				}
			});
		</script>
	</head>

	<body ng-controller="my_controller">
		<div>
			<ul>
				<!-- 多个字段正序 -->
				<li ng-repeat="item in students | orderBy:['classno','studentno']">
					{{item.studentname}}
				</li>
			</ul>
		</div>
		<div>
			<ul>
				<!-- 多个字段倒序 -->
				<li ng-repeat="item in students | orderBy:['-classno','-studentno']">
					{{item.studentname}}
				</li>
			</ul>
		</div>
		<div>
			<ul>
				<!-- 多个字段过滤 -->
				<li ng-repeat="item in students 
				|filter:{classno:'c001'}
				|filter:{studentno:'s001'}
				|orderBy:['studentno']" ng-click="getStudent(item.studentno);">
					{{item.studentname}}
				</li>
			</ul>
		</div>

		<div>
			<ul>
				<!-- 自定义过滤器 -->
				<li ng-repeat="item in students 
					| filter:myFilter
					| orderBy:['studentno']">
					{{item.studentname}}
				</li>
			</ul>
		</div>
	</body>

</html>