核心提示：前端增删改查代码分析!DOCTYPE htmlhtml head meta charset=UTF-8 meta name=viewport content=width=device-width,...
前端增删改查代码分析
<!DOCTYPE html>
<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="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//准备数据源
$scope.goods = [
{"id":"201","name":"opopA37","price":2000,"brand":"oppo"},
{"id":"202","name":"天逸310","price":4300,"brand":"联想"},
{"id":"203","name":"暖手宝","price":30,"brand":"凤凰"},
{"id":"204","name":"可乐","price":5,"brand":"百事"},
{"id":"205","name":"芬达","price":4,"brand":"可口可乐"}];
//过滤条件
$scope.searchKey;
//排序条件
$scope.orderByKey;
//删除 通过索引删除一条，，如果重新排序了，就会有bug
// $scope.deletGoodsByindex = function(i){
// $scope.goods.splice(i,1);//
// }
//通过id删除，没有任何bug
$scope.deletGoodsById = function(_id){
//得到_id在数据源中的索引号
//循环遍历得到每一个商品，用它的id和_id比较
for(var i=0;i<$scope.goods.length;i++){
var g = $scope.goods[i];//得到一个商品
if(g.id == _id){//此g就是要删除的，，删除之
$scope.goods.splice(i,1);
break;
}
}
};
//全选的属性
$scope.checkall = false;
//添加功能区域
$scope.addIsShow = false;
$scope.newname;
$scope.newprice;
$scope.newbrand;
$scope.addNewGood = function(){
var n = Math.round(Math.random()*100);//随机数作为id
//创建新商品对象,属性赋值
var a = {};
a.id = n;
a.name = $scope.newname;
a.price = $scope.newprice;
a.brand = $scope.newbrand;
//添加到数组
$scope.goods.push(a);
$scope.addIsShow = false;//设置隐藏
}
//修改
$scope.updateGood;
$scope.updateIsShow = false;//修改区域默认不显示
$scope.updatename;
$scope.updateprice;
$scope.updatebrand;
$scope.showGoodById = function(_id){
$scope.updateIsShow = true;//显示修改区域
//回显修改商品的信息，，先通过遍历数据源，找到要修改的商品对象
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].id==_id){//找到了要修改的商品信息
$scope.updateGood = $scope.goods[i];//收集修改对象
break;
}
}
//找到要修改的对象后，显示在页面中，数据绑定
$scope.updatename=$scope.updateGood.name;
$scope.updateprice=$scope.updateGood.price;
$scope.updatebrand=$scope.updateGood.brand;
}
//提交修改信息到数据源
$scope.updateGoodF = function(){
$scope.updateIsShow = false;//隐藏修改区域
$scope.updateGood.name = $scope.updatename;
$scope.updateGood.price = $scope.updateprice;
$scope.updateGood.brand = $scope.updatebrand;
}
//批量删除
$scope.deleteMore = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _id = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.goods.length;j++){//到数据源中找到和当前id匹配的商品，删除之
if($scope.goods[j].id == _id){
$scope.goods.splice(j,1);
break;
}
}
}
}
});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询：<input type="text" ng-model="searchKey" />
排序条件:<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="name">--按名字正序--</option>
<option value="-name">--按名字倒序--</option>
<option value="price">--按价钱正序--</option>
<option value="-price">--按价钱倒序--</option>
<option value="id">--按id正序--</option>
<option value="-id">--按id倒序--</option>
</select>
<input type="button" value="入库" ng-click="addIsShow=true"/>
<br /><br />
<p ng-show="addIsShow">
名字：<input type="text" ng-model="newname" /><br />
价钱：<input type="text" ng-model="newprice" /><br />
品牌：<input type="text" ng-model="newbrand" /><br />
<input type="button" value="添加" ng-click="addNewGood();" /><br />
</p>
<input style="text-align: right;" type="button" value="批量删除" ng-click="deleteMore();"/>
<table width="450px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="checkall"/></td>
<td>序号</td>
<td>id</td>
<td>名字</td>
<td>价格</td>
<td>品牌</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{g.id}}" ng-model="checkall" /></td>
<td>{{$index+1}}</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.brand}}</td>
<td>
<input type="button" value="删除" ng-click="deletGoodsById(g.id);"/>
<input type="button" value="修改" ng-click="showGoodById(g.id);"/>
</td>
</tr>
</table>
<p ng-show="updateIsShow">
名字：<input type="text" ng-model="updatename" /><br />
价钱：<input type="text" ng-model="updateprice" /><br />
产地：<input type="text" ng-model="updatebrand" /><br />
<input type="button" value="提交修改" ng-click="updateGoodF();" /><br />
</p>
</center>
</body>
</html>
