Angular模糊查询和排序已经添加

来源：互联网发布：mac vim 保存并退出编辑：程序博客网时间：2024/05/16 14:02
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular1.4.6.min.js"></script><script>    var app=angular.module("myapp",[]);    app.controller("mycon",function ($scope) {        $scope.phone=[            {id:915,name:"imac",price:15400},            {id:80,name:"iphone",price:5400},            {id:1200,name:"ipad mini",price:2200},            {id:500,name:"ipad air",price:2340},            {id:29,name:"ipad",price:1420},            ];        /*删除*/        $scope.delete=function (index) {            confirm("是否要删除"+$scope.phone[index].id);            $scope.phone.splice(index,1);        };        /*全部删除*/        $scope.remove=function () {            $scope.phone=[];        };        /*排序*/        $scope.orderColumn='name';        $scope.orderSign='-';        $scope.sortProduct=function(sortColumn) {            $scope.orderColumn = sortColumn;            if ($scope.orderSign == "-") {                $scope.orderSign = "";            } else {                $scope.orderSign = '-';            }        };        /*添加*/            $scope.input_id="";        $scope.input_name="";        $scope.input_price="";        $scope.add=function () {            $scope.phone.push({id:$scope.input_id,name:$scope.input_name,price:$scope.input_price});        }        })</script></head><body ng-app="myapp" ng-controller="mycon"><div>    <div style="margin-left: 50px;margin-bottom: 10px;margin-top: 10px">        <input type="text" placeholder="商品名称" ng-model="sea">        <button ng-click="remove()">全部删除</button>        <br>    </div>    <div>        <table class="table" cellpadding="20px" border="1" >            <thead>                    <tr>                        <td ng-click="sortProduct('id')">产品编号</td>                        <td ng-click="sortProduct('name')">产品名称</td>                        <td ng-click="sortProduct('price')">产品价格</td>                        <td>删除</td>                    </tr>            </thead>            <tbody>            <tr ng-repeat="p in phone | filter:{'name':sea} | orderBy:(orderSign + orderColumn)">                <td>{{p.id}}</td>                <td>{{p.name}}</td>                <td>{{p.price | currency:'(RMB)'}}</td>                <td><button ng-click="delete($index)">删除</button></td>            </tr>            </tbody>            <tfoot>                   <tr>                       <td><input type="text" ng-model="input_id"></td>                       <td><input type="text" ng-model="input_name"></td>                       <td><input type="text" ng-model="input_price"></td>                       <td><button ng-click="add()">添加</button></td>                   </tr>            </tfoot>        </table>    </div></div></body></html>
阅读全文
0 0