从学习Angular JS期间，一直觉得这是一个非常强大的框架。于是用Angular JS过滤器知识做了一个产品列表展示的功能。
功能点包括：列表展示，列排序（升序和降序），搜索（可对列表中的每个值进行模糊匹配或者指定字段的值模糊匹配）。
源码如下（要运行源码请先保证有angular.min.js和bootstrap.min.css 这两个文件都可以在网上下载）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css"> <title>Title</title> <script src="../../vendor/angular/angular.min.js"></script> <style> .orderColor { color : #ff1822; } </style> <script> var myApp = angular.module('product',[]) .service('productData',function () { return [ { id:100, name:'iphone5S', price:3800 },{ id:200, name:'iPad Air', price:6500 }, { id:300, name:'iMac', price:6800 },{ id:400, name:'iphone6 plus', price:5500 }, { id:500, name:'iphone7', price:5400 } ] }) .controller('productController',function ($scope,productData) { $scope.productData = productData; $scope.orderName = 'id'; $scope.orderSymbol = '-'; $scope.changeOrder = function (type) { $scope.orderName = type; if($scope.orderSymbol===''){ $scope.orderSymbol = '-'; }else{ $scope.orderSymbol = ''; } } }); </script> </head> <body> <div ng-app="product"> <div class="container" ng-controller="productController"> <nav class="navbar navbar-default" role="navigation"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form" role="search"> <div class="form-group"> <!-- <input type="text" ng-model="search" class="form-control" placeholder="Search">--> <!--只对name进行搜索--> <input type="text" ng-model="search.name" class="form-control" placeholder="Search"> </div> </form> </div> </nav> <table class="table"> <thead> <tr> <!--dropup:升序使用的class--> <th ng-click="changeOrder('id')" ng-class="{dropup:orderSymbol ===''}"> 产品编号 <span ng-class="{orderColor:orderName==='id'}" class="caret"></span> </th> <th ng-click="changeOrder('name')" ng-class="{dropup:orderSymbol ===''}"> 产品名称 <span ng-class="{orderColor:orderName==='name'}" class="caret"></span> </th> <th ng-click="changeOrder('price')" ng-class="{dropup:orderSymbol ===''}"> 产品单价 <span ng-class="{orderColor:orderName==='price'}" class="caret"></span> </th> </tr> </thead> <tbody > <!--对所有的内容的值进行搜索匹配--> <!--<tr ng-repeat="pro in productData |filter:search"> --> <!--只对id进行搜索（搜索条件相当于一个Map）--> <!-- <tr ng-repeat="pro in productData |filter:{id:search}">--> <tr ng-repeat="pro in productData |filter:search |orderBy:orderSymbol+orderName"> <td>{{pro.id}}</td> <td>{{pro.name}}</td> <td>{{pro.price | currency:'¥'}}</td> </tr> </tbody> </table> </div> </div> </body> </html>
效果如下：
功能亮点之一：可以灵活的对任何字段排序，而不用请求后台。
另外，我开发的时候用的工具是WebStorm，下载地址：https://www.jetbrains.com/webstorm/download/#section=windows
工具亮点之一：
