angularJs 增加 删除 排序

来源:互联网 发布:ubuntu输入法怎么用 编辑:程序博客网 时间:2024/06/06 00:40
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/angular.js" ></script><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){//添加数据$scope.bx =[{id:1234,name:'ipad',price:3400,kc:10},{id:1244,name:'aphone',price:5400,kc:30},{id:1334,name:'mypad',price:3600,kc:15},{id:8234,name:'zpad',price:7400,kc:16}];//删除$scope.shan = function(index){$scope.bx.splice(index,1);};//批量删除$scope.plsc =function(index){$scope.bx.splice(index);};//排序$scope.orderColumn='name';$scope.orderSign='-';$scope.sort = function(sortColumn){$scope.orderColumn=sortColumn;if($scope.orderSign=='-'){$scope.orderSign="";}else{$scope.orderSign="-";}};});</script></head><link rel="stylesheet" href="css/zk.css" /><body ng-app="myApp" ng-controller="myCtrl"><div id="bos"><div id="s"><input type="text" id="search" ng-model="search" placeholder="输入关键字..." /><button class="pl" ng-click="plsc($index)" >批量删除</button></div><div id="x"><table><tr><td><input type="checkbox" ng-model="qx"/></td><td ng-click="sort('id')">商品编号</td><td ng-click="sort('name')" style="color: red;">商品名称</td><td ng-click="sort('price')">商品价格</td><td ng-click="sort('kc')">商品库存</td><td>数据操作</td></tr><tr ng-repeat="x in bx | filter:{'name':search}|orderBy:(orderSign + orderColumn)"><td><input type="checkbox" ng-checked="qx"/></td><td>{{x.id}}</td><td>{{x.name}}</td><td>{{x.price | currency:'¥:'}}</td><td>{{x.kc}}</td><td><button style="background: orange;" ng-click="shan($index)">删除</button></td></tr></table></div></div></body></html>