Angularjs

来源：互联网发布：朝鲜扫码软件编辑：程序博客网时间：2024/05/18 13:09
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/angular.js"></script><style>.na {margin: 0 auto;text-align: center;width: 400px;height: 50px;line-height: 50px;background: lightsteelblue;}</style><script type="text/javascript">var app = angular.module("myapp", []);app.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},]});app.controller("myctrl", function($scope, productList) {$scope.productList = productList;$scope.orderColumn = 'name'; //排序字段  $scope.orderSign = '-'; //为空时正序 为负号时倒序  $scope.sortProduct = function(sortColumn) { //点击列标题排序事件  $scope.orderColumn = sortColumn;if($scope.orderSign == "-") {$scope.orderSign = "";} else {$scope.orderSign = '-';}};//全部刪除$scope.removeAll=function(){$scope.productList=[];}//刪除$scope.del=function(index){$scope.productList.splice("index",1);}});</script></head><body ng-app="myapp" ng-controller="myctrl"><nav class="na"><input type="text" ng-model="search" placeholder="产品名称"><button ng-click="removeAll()">全部删除</button></nav><table border="1" align="center"><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="del($inddex)">删除</button></td></tr></tbody></table></body></html>
阅读全文
0 0