angularJS

来源：互联网发布：流体计算软件编辑：程序博客网时间：2024/06/05 05:39
<!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