angular增删改查

最新推荐文章于 2022-11-17 14:05:54 发布

Android_ElitePerson

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量184

点赞数

分类专栏：代码

代码专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){

//准备数据源
$scope.goods = [
{"id":"201","name":"冰激凌","price":3,"brand":"蒙牛"},
{"id":"202","name":"老冰棍","price":1,"brand":"老北京"},
{"id":"203","name":"西瓜","price":10,"brand":"麒麟"},
{"id":"204","name":"可乐","price":5,"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 />
<div 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 />
</div>
<input style="text-align: right;" type="button" value="批量删除" ng-click="deleteMore();"/>
<table width="400px" 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>
<div 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 />
</div>

</center>
</body>
</html>

Android_ElitePerson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular增删改查

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../js/angular.min.js" type="text/javascript" charse
复制链接

扫一扫