HTML查询>

来源：互联网发布：超人电力软件编辑：程序博客网时间：2024/06/08 16:03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular1.4.6.min.js"></script>
</head>
<body>
<script>
    angular.module('product', [])
        .factory('productList', function () {
            return [
                {id: 910, name: "imac", price: 15400},
                {id: 80, name: "iphone", price: 5400},
                {id: 29, name: "ipad", price: 1420},
                {id: 500, name: "ipad air", price: 2340},
                {id: 1200, name: "ipad mini", price: 2200}
            ]
        })
        .controller('productController', function ($scope, productList) {
            /*$scope.search = "ipad";//定义一个变量
            alert($scope.search);*/

            $scope.productList = productList
            $scope.orderColumn = 'name'; //排序字段
            $scope.orderSign = '-';      //为空时正序为负号时倒序

            $scope.sortProduct = function (sortColumn) {  //点击列标题排序事件
                $scope.orderColumn = sortColumn;//觉得按照那一列进行排序
                if ($scope.orderSign == "-") {
                    $scope.orderSign = "";
                } else {
                    $scope.orderSign = '-';
                }
            };
            //删除产品
            $scope.delProduct = function (name) {
                //alert(name);
                if (name != "") {
                    if (confirm("是否删除" + name + "商品")) {
                        var p;
                        for (index in $scope.productList) {
                            p = $scope.productList[index];
                            if (

p.name

== name) {
                                $scope.productList.splice(index, 1);
                            }
                        }
                    }
                }
            }
        });
</script>
<center>
    <div class="container" ng-app="product" ng-controller="productController">
        
        <nav>
            <div >
                <div id="bs-example-navbar-collapse-1">
                    <div>
                        <input type="text" ng-model="search" placeholder="产品名称">
                        　　产品价格:
                        <select>
                            <option>1000-2000</option>
                        </select>
                    </div>
                </div>
            </div>
        </nav><br />
        <table border="1 solid" cellpadding="10" cellspacing="0">
            <thead>
            <tr>
                <th ng-click="sortProduct('id')">
                    产品编号

                </th>
                <th ng-click="sortProduct('name')">
                    产品名称

                </th>
                <th ng-click="sortProduct( 'price')">
                    产品价格

                </th>
                <th>
                    操作

                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in productList | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) ">
                <td>
                    {{

item.id

}}
                </td>
                <td>
                    {{

item.name

}}
                </td>
                <td>
                    {{item.price | currency:'(RMB)'}}
                </td>

                <td>
                    <button ng-click="delProduct(

item.name

)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</center>

</body>
</html>

阅读全文

0 0