angular的表格

<script>
var app=angular.module("app",[]);
<!--定义angular的控制器 -->
app.controller("ctr",function ($scope) {
<!--定义数据-->
var arr=[{
id:"1235",
name:"苹果8",
price:"5000",
num:1,
check:false
}]
<!--数据的绑定 -->
$scope.col="id";
$scope.data=arr;
$scope.shu="";
$scope.desc=false;
<!--删除-->
$scope.shan=function (index) {
alert("是否删除");
$scope.data.splice(index,1);
};
<!--批量删除 -->
$scope.chu=function () {
var a=confirm("确定删除");
if(a==true){
var arr=[];
for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==false){ arr.push($scope.data[i]); } } $scope.data=arr; } }; <!--排序 --> $scope.hh1=function (col) { if(col==$scope.col){ $scope.desc=!$scope.desc; } $scope.col=col; } <!-- 删除全部--> $scope.st=false; $scope.dian=function () { if($scope.st==true){ for (var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } } <!-- 每个复选框--> $scope.fu=function () { var fale=0; for (var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ fale++; } } if(fale==$scope.data.length){ $scope.st=true }else{ $scope.st=false } } })</script>
<input type="text" ng-model="shu">  <button ng-click="chu()">批量删除</button>
<!--table的定义-->
<table>
<!--tr的点击事件-->
<tr ng-click="dian()">
<td><input type="checkbox" ng-click="dian()" ng-model="st"></td>
<td ng-click="hh1('id')" id="t1">商品编号</td>
<td ng-click="hh1('name')" id="t2">商品名称</td>
<td ng-click="hh1('price')" id="t3">商品价格</td>
<td ng-click="hh1('num')" id="t4">商品库存</td>
<td>数据操作</td>
</tr>
<!--遍历数组,渲染到页面上-->
<!--一些过滤器-->
<tr ng-repeat="item in data | filter:shu | orderBy:col:desc">
<td><input type="checkbox" ng-click="fu()" ng-model="item.check"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price|currency:"¥"}}</td>
<td>{{item.num}}</td>
<td><button ng-click="shan($index)">删除</button></td>
</tr>
</table>

原文地址:https://www.cnblogs.com/zzwerzi/p/7559896.html