Angular内置过滤器+orderBy排序+模糊查询

最新推荐文章于 2019-07-05 18:35:42 发布

C--罗纳尔多

最新推荐文章于 2019-07-05 18:35:42 发布

阅读量678

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/dangai0201/article/details/77895889

版权

html5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            margin: 100px auto;
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }


    </style>
    <script src="angular/angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.books=[{
                name:"JavaScript",public:false,update:"1504707661308",has:true
            },{
                name:"Angular权威教程",public:false,update:"1204707661308",has:false
            },{
                name:"Vue实战",public:false,update:"1804707661308",has:false
            },{
                name:"JavaScript",public:true,update:"1504707561308",has:true
            }];
            $scope.price="99.9";
            /*$scope.filt=""*/

        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="filt">
<table>
    <thead><tr>
        <th>名字</th>
        <th>出版情况</th>
        <th>更新时间</th>
        <th>是否有库存</th>
    </tr></thead>
    <tbody>
    <!--|limitTo:2显示两条数据-->
    <tr ng-repeat="item in books | filter:filt |orderBy:'-name':false">
        <td>{{item.name|lowercase}}</td>
        <td>{{item.public}}</td>
        <td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td>
        <td>{{item.has}}</td>
    </tr>
    </tbody>
</table>
<div>{{price|currency:"￥"}}</div>


</body>
</html>