<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <script type="text/javascript" src="angular.min.js" ></script> <script type="text/javascript" src="index.js"></script> <body ng-app="myApp" ng-controller="productController"> <p class="container"> <form class="navbar-form pull-left"> <input type="text" class="span2" placeholder="Search" ng-model="search.id"> </form> <table class="table"> <thead> <tr> <!--dropup:true 这个class就显示,即升序,否则不显示!--> <!--注意,这里是ng-class,还有droupup:order中间是没有任何空格的!!!!--> <th ng-class="{dropup:order ===''}" ng-click="changeOrder('id')"> 产品编号<span class="caret"></span> </th> <th ng-class="{dropup:order ===''}" ng-click="changeOrder('name')"> 产品名称<span class="caret"></span> </th> <th ng-class="{dropup:order === ''}" ng-click="changeOrder('price')"> 产品价格<span class="caret"></span> </th> </tr> </thead> <tbody> <!--<tr ng-repeat="product in products | filter:{id:search}">--> <!--order+orderType注意这两个字段是有顺序的 不能反着写--> <tr ng-repeat="product in products | filter:search | orderBy : order+orderType"> <td> {{product.id}} </td> <td> {{product.name}} </td> <td> {{product.price | currency : "(RMB)"}} </td> </tr> </tbody> </table> </p> index.js var app = angular.module("myApp", []); app.service("products", function() { return [{ id: 1, name: "iphone", price: 5000 }, { id: 2, name: "iphone 4", price: 1993 }, { id: 3, name: "iphone 5", price: 2893 }, { id: 4, name: "iphone 6", price: 4500 }]; }); app.controller("productController", function($scope, products) { $scope.products = products; //Angular自动注入 //排序条件 $scope.order = "-"; //默认是升序,-表示降序 $scope.orderType = "id"; //以id来排序,不能直接在页面以id这个字段排序 $scope.changeOrder = function(type) { $scope.orderType = type; //如果本来是降序,就变为升序,如果是升序,就变为降序 if ($scope.order === '') { $scope.order = '-'; } else { $scope.order = ''; } } });
관련 권장 사항;
협업 필터링 추천 알고리즘의 Python 구현에 대한 자세한 설명
동적 검색 및 정렬 기능을 구현하는 Angularjs 필터에 대한 자세한 설명
위 내용은 angular.js 테이블 콘텐츠 검색 및 필터 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!