AngularJs过滤器
来源：互联网 发布：三菱plc仿真教学软件 编辑：程序博客网 时间：2024/06/05 15:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angularjs.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script>
angular.module('myApp',[])
.service('data',function(){
return [
{id:1234,name:'ipad',price:3400},
{id:1244,name:'aphone',price:6400},
{id:1334,name:'mypad',price:4400},
{id:8234,name:'zpad',price:8400}
];
})
.controller('myController',function($scope,data){
$scope.data=data;
$scope.change=function(order){
//$scope.orderType='';
$scope.order=order;
if($scope.orderType==''){
$scope.orderType='-';
}else{
$scope.orderType='';
}
}
})
</script>
<style>
.red{color: red;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController" class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th ng-click="change('id')" ng-class="{dropup:orderType==''}">id<span ng-class="{red:order=='id'}" class="caret"></span></th>
<th ng-click="change('name')" ng-class="{dropup:orderType==''}">name<span ng-class="{red:order=='name'}" class="caret"></span></th>
<th ng-click="change('price')" ng-class="{dropup:orderType==''}">price<span ng-class="{red:order=='price'}" class="caret"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data | filter:search | orderBy:orderType+order ">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angularjs.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script>
angular.module('myApp',[])
.service('data',function(){
return [
{id:1234,name:'ipad',price:3400},
{id:1244,name:'aphone',price:6400},
{id:1334,name:'mypad',price:4400},
{id:8234,name:'zpad',price:8400}
];
})
.controller('myController',function($scope,data){
$scope.data=data;
$scope.change=function(order){
//$scope.orderType='';
$scope.order=order;
if($scope.orderType==''){
$scope.orderType='-';
}else{
$scope.orderType='';
}
}
})
</script>
<style>
.red{color: red;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController" class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th ng-click="change('id')" ng-class="{dropup:orderType==''}">id<span ng-class="{red:order=='id'}" class="caret"></span></th>
<th ng-click="change('name')" ng-class="{dropup:orderType==''}">name<span ng-class="{red:order=='name'}" class="caret"></span></th>
<th ng-click="change('price')" ng-class="{dropup:orderType==''}">price<span ng-class="{red:order=='price'}" class="caret"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data | filter:search | orderBy:orderType+order ">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
阅读全文
0 0
- angularjs 过滤器
- AngularJs 过滤器
- AngularJS--过滤器
- AngularJs过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJs 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- angularjs-过滤器
- AngularJS 过滤器
- AngularJs过滤器
- angularJS 过滤器
- AngularJS 过滤器
- angularjs过滤器
- angularJS 过滤器
- AngularJS 过滤器
- 练习记录0821--RecyclerView实现网络图片瀑布流
- UNION 与 UNION ALL 常见用法
- Android性能工具相关教程
- windows下编译及使用libevent
- Android6.0 PackageManagerService(PMS)-简介
- AngularJs过滤器
- 动态规划 8.21 体会
- caffe训练自己的数据时的错误
- centos 安装 lnmp 环境
- prokject.js
- Stars--树状数组
- Lintcode 有效的括号序列
- Laravel框架执行流程
- SelectLayout-一个选择放大的Layout
