<!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 增加 刪除 排序
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章