（angular）增 刪 改 查
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="1511R_Test/libs/angular.min.js" ></script>
<script type="text/javascript" src="1511R_Test/libs/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods =
[
{"id":1,"name":"小米5","price":1600,"product":"北京"},
{"id":2,"name":"華爲p10","price":4200,"product":"東莞"},
{"id":3,"name":"vivox20","price":2600,"product":"佛山"}
];
//查詢關鍵字
$scope.seacherKey = "";
//排序關鍵字
$scope.orderKey = "";
//全選複選框的綁定字段
$scope.checkAll = false;
//顯示添加模塊，，默認不顯示
$scope.showAdd = false;
//創建和新增商品信息相綁定的字段屬性
$scope.name = "";
$scope.price = "";
$scope.product = "";
//添加按鈕的點擊事件
$scope.addGood = function(){
var good = {};
good.name = $scope.name;//把輸入的商品名稱給 good對象
good.price = $scope.price;
good.product = $scope.product;
//把good添加到 goods數組中，數據源
$scope.goods.push(good);
//隱藏添加區域
$scope.showAdd = false;
//顯示table
$scope.showTable = true;
}
//控制table是否顯示的屬性
$scope.showTable = true;
//刪除
$scope.deleteGood = function(gname){
// $scope.goods.splice($index,1);//從$index開始，刪除1條
//遍歷數組，找到要刪除的商品
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name == gname){//遍歷得到的商品信息就是我們要刪除的，，i就是他再數組中的索引
$scope.goods.splice(i,1);
break;//刪除後跳出循環
}
}
//如果刪光了，隱藏table的頭
if($scope.goods.length == 0){
$scope.showTable = false;//隱藏
}
}
//是否顯示修改回顯區域
$scope.showUpdate = false;
$scope.upIndex = "";
//定義接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = "";//要修改的商品信息
//修改按鈕的回調
$scope.showGood = function(gname){//$index表示要修改的數據的索引
//顯示修改回顯區域
$scope.showUpdate = true;
//遍歷數組，找到要修改的商品
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name == gname){//遍歷得到的商品信息就是我們要刪除的，，i就是他再數組中的索引
updateGood = $scope.goods[i];
break;//找到修改的商品後，跳出循環
}
}
//顯示修改信息到頁面，，第一步得到修改信息
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
//提交修改
$scope.updateGood = function(){
updateGood.name = $scope.upname;//把新的名字替換舊名字
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//隱藏修改回顯區域
$scope.showUpdate = false;
}
//批量刪除
$scope.deleteMore = function(){
if($scope.checkAll){//全選打鉤，全部打鉤，，全刪除
$scope.goods = [];
}else{//不是全刪除
var checked = $("input[type=checkbox]:checked");//獲得所有打鉤的複選框
for(var i= checked.length-1;i>=0;i--){//從大往小遍歷選中的複選框
$scope.goods.splice(checked[i].value,1);//通過複選框中的索引，到數據源中刪除數據，，從下往上刪除
}
}
}
});
</script>
<style>
th,td{
width: 80px;
text-align: center;
}
/**定義兩個顏色樣式**/
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>查詢：<input type="text" placeholder="請輸入查詢關鍵字" ng-model="seacherKey"/>
排序：<select ng-model="orderKey">
<option value="">--請選擇--</option>
<option value="name">名稱正序</option>
<option value="-name">名稱倒序</option>
<option value="price">價錢正序</option>
<option value="-price">價錢倒序</option>
</select>
<!--是否顯示添加區域的快關，，，showAdd=!showAdd 表示 逆操作-->
<input type="button" value="入庫/增加" ng-click="showAdd=!showAdd"/>
</div>
<br />
<div ng-show="showAdd">
商品名稱：<input type="text" placeholder="請輸入商品名稱" ng-model="name"/><br />
商品價錢：<input type="number" placeholder="請輸入商品價錢" ng-model="price"/><br />
商品產地：<input type="text" placeholder="請輸入商品產地" ng-model="product"/><br />
<input type="button" value="添加" ng-click="addGood();"/>
</div>
<br />
<div style="margin-right: 10px;"><input type="button" value="批量刪除" ng-click="deleteMore();"/></div><br />
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序號</th>
<th>id</th>
<th>商品名稱</th>
<th>價錢</th>
<th ng-click="orderKey='product'">產地</th>
<th style="width: 110px;">操作</th>
</tr>
<!--下一行註釋的部分：只對 name進行過濾查詢-->
<!--<tr ng-repeat="g in goods | filter:{name:seacherKey} " class="{{$index%2? 'yellow':'red'}}" >-->
<tr ng-repeat="g in goods | filter:seacherKey | orderBy:orderKey " class="{{$index%2? 'yellow':'red'}}" >
<td><input type="checkbox" value="{{$index}}" ng-model="checkAll"/></td>
<td>{{$index}}</td><!--系統自動索引-->
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>
<td >
<input type="button" value="刪除" ng-click="deleteGood(g.name);"/>
<input type="button" value="修改" ng-click="showGood(g.name);"/>
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名稱：<input type="text" ng-model="upname"/><br />
商品價錢：<input type="number" ng-model="upprice"/><br />
商品產地：<input type="text" ng-model="upproduct"/><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();"/>
</div>
<br />
</center>
<p>{{goods}}</p>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章