您的位置：首页 > Web前端 > AngularJS

AngularJS实现产品列表（页面搜索，排序）

2015-06-29 11:32 746 查看

标签属性介绍
ng-class="{className:expression}" 如果expression为true，则使用className这个class。
ng-click="functionName(pram)" 这跟onclick是一样的，点击就执行functionName(pram)。
ng-repeat="i in set | filter:filterExpression or filterFunction| orderBy:order+orderType" 循环set里的元素，有过滤条件和排序条件。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}

.orderColor {
color: red;
}
</style>
</head>

<body ng-app="product">
<div class="container" ng-controller="firstController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="查找内容" ng-model="search">
</div>
</form>
</div>
</div>
</nav>
<table class="table">
<thead>
<tr>
<th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">产品名称<span class="caret" ng-class="{orderColor:orderType==='id'}"></span></th>
<th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">产品编号<span class="caret" ng-class="{orderColor:orderType==='name'}"></span></th>
<th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">产品价格<span class="caret" ng-class="{orderColor:orderType==='price'}"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in productData | filter:search | orderBy:order+orderType">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency:'RMB '}}</td>
</tr>
</tbody>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
<script type="text/javascript">
angular.module('product', [])
.service('productData', function() {
return [{
id: 1098,
name: 'iPhone',
price: 5288
}, {
id: 5420,
name: 'iPad',
price: 4388
}, {
id: 2067,
name: 'Mac Book',
price: 10888
}, {
id: 5991,
name: 'Surface',
price: 9288
}];
})
.controller('firstController', function($scope, productData) {
$scope.productData = productData;
$scope.orderType = 'id';
$scope.order = '-';
$scope.changeOrder = function(type) {
$scope.orderType = type;
if ($scope.order === '') {
$scope.order = '-';
} else {
$scope.order = '';
}
}
});
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航