angularJs 删除 查询 排序

来源:互联网 发布:淘宝拍视频用什么软件 编辑:程序博客网 时间:2024/06/05 10:04
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><script src="angular.js"></script><style>    *{        margin: 0;        padding:0;    }    table{        border-collapse: collapse;    }    td{        padding: 10px;        border:1px solid #000;    }</style><script>    var app = angular.module("myApp",[]);    app.controller("myCtrl",function ($scope) {        var userInfo=[            {cpbm:80,cpmc:"iphone",cpjg:5400},            {cpbm:1200,cpmc:"ipad mini",cpjg:2200},            {cpbm:500,cpmc:"ipad air",cpjg:2340},            {cpbm:29,cpmc:"ipad",cpjg:1420},            {cpbm:910,cpmc:"imac",cpjg:15400}        ];        $scope.arr = userInfo;        $scope.sortFlag="-";        $scope.sortName="cpmc";        $scope.sortProducts = function (clomnName) {            $scope.sortName = clomnName;            if($scope.sortFlag == "-"){                $scope.sortFlag = "";            }else{                $scope.sortFlag = "-";            }        };        $scope.deleteP = function (cpmc) {            for(index in $scope.arr){                if($scope.arr[index].cpmc == cpmc){                    $scope.arr.splice(index,1);                }            }        }    });</script><body ng-app="myApp" ng-controller="myCtrl"><center>   <input type="text" ng-model="mc"/>   <button >全部删除</button><br>   <table>       <thead>           <th ng-click="sortProducts('cpbm')">产品编号</th>           <th ng-click="sortProducts('cpmc')">产品名称</th>           <th ng-click="sortProducts('cpjg')">产品价格</th>           <th>功能</th>       </thead>       <tbody>            <tr ng-repeat="item in arr | filter:mc | orderBy:(sortFlag+sortName)">                <td>{{item.cpbm}}</td>                <td>{{item.cpmc}}</td>                <td>{{item.cpjg | currency:"(RMB)"}}</td>                <td><button ng-click="deleteP(item.cpmc)">删除</button></td>            </tr>       </tbody>   </table></center></body></html>
原创粉丝点击