前端开发angularjs过滤器

优达学城前端开发视频
web前端开发html教学视频
清华创客前端开发视频

html 代码

<!DOCTYPE html>
<html lang=”en” ng-app=”myApp”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Title</title>
        <link
            href=”http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css
            rel=”stylesheet”
        />
        <script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js”></script>
        <style>
            .orderColor {
                color: red;
            }
        </style>
    </head>
    <body ng-controller=”myProduct”>
        <div class=”container”>
            <nav class=”navbar navbar-default” role=”navigation”>
                <div class=”container-fluid”>
                    <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=”Search”
                                    ng-model=”search”
                                />
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
            <table class=”table”>
                <thead>
                    <tr>
                        <th
                            ng-click=”changeOrder(‘id’)”
                            ng-class=”{dropup:order==”&&orderType==’id’}”
                        >
                            产品编号
                            <div
                                ng-class=”{orderColor:orderType==’id’}”
                                class=”caret”
                            ></div>
                        </th>
                        <th
                            ng-click=”changeOrder(‘name’)”
                            ng-class=”{dropup:order==”&&orderType==’name’}”
                        >
                            产品名称
                            <div
                                ng-class=”{orderColor:orderType==’name’}”
                                class=”caret”
                            ></div>
                        </th>
                        <th
                            ng-click=”changeOrder(‘price’)”
                            ng-class=”{dropup:order==”&&orderType==’price’}”
                        >
                            产品价格
                            <div
                                ng-class=”{orderColor:orderType==’price’}”
                                class=”caret”
                            ></div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        ng-repeat=”item in product|filter:search|orderBy:order+orderType”
                    >
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price | currency: ‘(RMB)’ }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var mod = angular.module(‘myApp’, [])
            mod.controller(‘myProduct’, [
                ‘$scope’,
                function($scope) {
                    $scope.orderType = ‘id’
                    $scope.order = ‘-‘
                    $scope.changeOrder = function(type) {
                        $scope.orderType = type
                        if ($scope.order == ”) {
                            $scope.order = ‘-‘
                        } else {
                            $scope.order = ”
                        }
                    }
                    $scope.product = [
                        {
                            id: 3,
                            name: ‘iphone6’,
                            price: 5000,
                        },
                        {
                            id: 4,
                            name: ‘imac’,
                            price: 8000,
                        },
                        {
                            id: 1,
                            name: ‘iphone6plus’,
                            price: 6000,
                        },
                        {
                            id: 5,
                            name: ‘nokia’,
                            price: 3000,
                        },
                        {
                            id: 2,
                            name: ‘ipad’,
                            price: 2000,
                        },
                    ]
                },
            ])
        </script>
    </body>
</html>
前端开发的课程视频
前端开发里面怎么上传视频
2016达内前端开发视频微盘
» 本文来自:前端开发者 » 《前端开发angularjs过滤器》
» 本文链接地址:https://www.rokub.com/6975.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!