js开发中angularjs产品列表源码分析。
angular.module('product', []) .service('productData', function () { return [ { id:333, name:'ipone', price:5400 }, { id:8845, name:'ipad', price:3420 }, { id:980, name:'imac', price:15400 }, { id:1212, name:'ipad air', price:2300 }, { id:3424, name:'ipad mini', price:2200 } ] }) .controller('productController', function ($scope, productData) { $scope.productData = productData; $scope.orderType = 'id'; $scope.order = '-'; $scope.changOrder = function (type) { $scope.orderType = type; if($scope.order === ''){ $scope.order = '-'; } else { $scope.order = ''; } } })
调用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../vendor/bootstrap3/css/bootstrap.min.css"> <style> .orderColor{ color:red; } </style> </head> <body> <p ng-app="product"> <p class="container" ng-controller="productController"> <nav class="navbar navbar-default"> <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <p class="form-group"> <input type="text" ng-model="search.id" class="form-control" placeholder="Search"> </p> </form> </p> </nav> <table class="table"> <thead> <tr> <th ng-click="changOrder('id')" ng-class="{dropup:order === ''}"> 产品编号 <span ng-class="{orderColor:orderType === 'id'}" class="caret"></span> </th> <th ng-click="changOrder('name')" ng-class="{dropup:order === ''}"> 产品名称 <span ng-class="{orderColor:orderType === 'name'}" class="caret"></span> </th> <th ng-click="changOrder('price')" ng-class="{dropup:order === ''}"> 产品价格 <span ng-class="{orderColor:orderType === 'price'}" class="caret"></span> </th> </tr> </thead> <tbody> <tr ng-repeat="product in productData | filter : search | orderBy:order+orderType"> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price | currency : '¥ '}}</td> </tr> </tbody> </table> </p> </p> <script type="text/javascript" src="../vendor/angular/angularjs.js"></script> <script type="text/javascript" src="./app/index.js"></script> </body> </html>
效果图: