本文共 2914 字，大约阅读时间需要 9 分钟。
标签属性介绍
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里的元素，有过滤条件和排序条件。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!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 > |