Angular Js如何实现排序

最新推荐文章于 2021-05-08 16:48:07 发布

W2597645565

最新推荐文章于 2021-05-08 16:48:07 发布

阅读量672

点赞数

本文链接：https://blog.csdn.net/W2597645565/article/details/79812408

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<script type="text/javascript">
		var app=angular.module("myapp",[]).controller("myctrl",function ($scope,$http) {
			$scope.arr=["--按要求排序--","电影时长正序","电影时长倒序","售价正序","售价倒序","上映时间正序","上映时间倒序","评分正序","评分倒序"];
			$http.get("xinxi.json").then(function(success){
				$scope.xinxi=success.data;
			});
			$scope.change=function () {
				for (var i = 0; i < $scope.xinxi.length; i++) {
					$scope.xinxi[i].ck=$scope.checked;
				}
			}
			$scope.xg=function (i) {
				var a=prompt("评分修改",$scope.xinxi[i].score);
				$scope.xinxi[i].score=a;
			}
			$scope.sc=function (i) {
				if(confirm("您确定要删除该数据吗？"))
				{
					$scope.xinxi.splice(i,1);
					alert("删除成功！");
				}
			}
			$scope.plsc=function () {
				
				for (var i = 0; i < $scope.xinxi.length; i++) {
					if($scope.xinxi[i].ck){
						$scope.xinxi.splice(i,1);
						i--;
					}
				}
			}
			$scope.schange=function () {
				var yaoqiu=$scope.yaoqiu;
				switch (yaoqiu){
					case "电影时长正序":
						$scope.xinxi.sort(function (a,b) {
							return a.time-b.time;
						});
						break;
					case "电影时长倒序":
						$scope.xinxi.sort(function (a,b) {
							return b.time-a.time;
						});
						break;
					case "售价正序":
						$scope.xinxi.sort(function (a,b) {
							return a.price-b.price;
						});
						break;
					case "售价倒序":
						$scope.xinxi.sort(function (a,b) {
							return b.price-a.price;
						});
						break;
					case "上映时间正序":
						$scope.xinxi.sort(function (a,b) {
							return a.playTime-b.playTime;
						});
						break;
					case "上映时间倒序":
						$scope.xinxi.sort(function (a,b) {
							return b.playTime-a.playTime;
						});
						break;
					case "评分正序":
						$scope.xinxi.sort(function (a,b) {
							return a.score-b.score;
						});
						break;
					case "评分倒序":
						$scope.xinxi.sort(function (a,b) {
							return b.score-a.score;
						});
						break;
					default:
						break;
				}
			}
		});
	</script>
	<body ng-app="myapp" ng-controller="myctrl">
		
		<input type="text" ng-model="queryName" placeholder="按电影名称模糊查询..."/>
		<button ng-click="query=queryName">搜索</button>
		<select ng-model="yaoqiu" ng-init="yaoqiu=arr[0]" ng-options="y for y in arr" ng-change="schange()">{{y}}</select>
		<button ng-click="plsc()">批量删除</button>
		<table border="1" cellspacing="0" cellpadding="0" width="80%">
			<tr>
				<td>
					<input type="checkbox" ng-model="checked" ng-change="change()"/>
				</td>
				<td>电影名称</td>
				<td>类别</td>
				<td>时长</td>
				<td>导演</td>
				<td>售价</td>
				<td>上架时间</td>
				<td>评分</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="x in xinxi|filter:query">
				<td>
					<input type="checkbox" ng-model="x.ck"/>
				</td>
				<td>{{x.name}}</td>
				<td>{{x.type[0]}},{{x.type[1]}}</td>
				<td>{{x.time}}分钟</td>
				<td>{{x.author}}</td>
				<td>{{x.price|currency:"￥："}}</td>
				<td>{{x.playTime|date:"yyyy-MM-dd hh:mm:ss"}}</td>
				<td>{{x.score}}</td>
				<td>
					<button ng-click="xg($index)">修改</button>
					<button ng-click="sc($index)">删除</button>
				</td>
			</tr>
		</table>
	</body>
</html>

W2597645565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular Js如何实现排序

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="angular.min.js" type="text/javascript" charset
复制链接

扫一扫