angularjs产品列表源码

最新推荐文章于 2021-02-21 17:31:06 发布

dancheng_work

最新推荐文章于 2021-02-21 17:31:06 发布

阅读量324

点赞数

分类专栏： # angularjs

本文链接：https://blog.csdn.net/dancheng1/article/details/78178010

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>
    <div ng-app="product">
        <div class="container" ng-controller="productController">
            <nav class="navbar navbar-default">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" ng-model="search.id" class="form-control" placeholder="Search">
                        </div>
                    </form>
                </div>
            </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>
        </div>
    </div>
    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="./app/index.js"></script>
</body>
</html>

效果图：

dancheng_work

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs产品列表源码

angular.module('product', []) .service('productData', function () { return [ { id:333, name:'ipone', price:5400 },
复制链接

扫一扫

专栏目录