<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS實現表格的刪除,查詢,排序功能</title> <script src="angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.shuzu = [{ id:80, name:"iphone", price:5400 },{ id:150, name:"ipad mini", price:2200 },{ id:120, name:"ipad air", price:2340 },{ id:160, name:"ipad", price:1420 },{ id:130, name:"imac", price:15400 }]; $scope.aflag = "-"; $scope.aname = "name"; $scope.paixu = function (clomnName) { alert(clomnName); $scope.aname = clomnName; //判斷 if($scope.aflag == "-"){ $scope.aflag = ""; }else{ $scope.aflag = "-" } }; $scope.deleteName = function (name) { for(index in $scope.shuzu){ if($scope.shuzu[index].name == name){ $scope.shuzu.splice(index,1); } } } $scope.deleteAll = function () { $scope.shuzu = null; } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>商品列表</h3> <input type="text" placeholder="商品名稱" ng-model="textName"> <button ng-click="deleteAll()">刪除全部</button><br/><br/> <table border="1" cellpadding="10" cellspacing="0"> <tr> <th ng-click="paixu('id')">產品編號</th> <th ng-click="paixu('name')">產品名稱</th> <th ng-click="paixu('price')">產品價格</th> <th>功能</th> </tr> <tr ng-repeat="i in shuzu | filter:textName | orderBy:(aflag+aname)"> <td>{{i.id}}</td> <td>{{i.name}}</td> <td>{{i.price}}</td> <td><button ng-click="deleteName(i.name)">刪除</button></td> </tr> </table> </center> </body> </html>
