<!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>
扫一扫
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
