>  기사  >  웹 프론트엔드  >  angular.js 테이블 콘텐츠 검색 및 필터 샘플 코드

angular.js 테이블 콘텐츠 검색 및 필터 샘플 코드

小云云
小云云원래의
2017-12-18 15:15:041337검색

이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로angular.js 테이블 콘텐츠 검색 및 필터 샘플 코드를 공유합니다.

angular.js 테이블 콘텐츠 검색 및 필터링 코드

 <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 ===&#39;&#39;}" ng-click="changeOrder(&#39;id&#39;)"> 产品编号<span class="caret"></span> </th>
        <th ng-class="{dropup:order ===&#39;&#39;}" ng-click="changeOrder(&#39;name&#39;)"> 产品名称<span class="caret"></span> </th>
        <th ng-class="{dropup:order === &#39;&#39;}" ng-click="changeOrder(&#39;price&#39;)"> 产品价格<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.