您的位置：首页 > Web前端 > AngularJS

angularJs 增加删除排序

2017-09-21 13:45 155 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

angularJs 增加 删除 排序

angularJs 增加删除排序