<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>
</head>
<body ng-app="myapp" ng-controller="myctrl" >
<input type="text" id="" value="" ng-model="key"/>
<select name="" ng-model="byprice">
<option value="gprice">单价正序</option>
<option value="-gprice">单价倒序</option>
</select>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>行引值</th>
<th>商品名</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品总价</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in shops|filter:key|orderBy:byprice">
<td>{{$index}}</td>
<td>{{x.gname}}</td>
<td>
<input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-click="delbynum(x.gid)" />
</td>
<td>{{x.gprice|currency:"¥:"}}</td>
<td>{{x.gcount*x.gnum|currency:"¥:"}}</td>
<td><input type="button" id="" value="珊除" ng-click="del(x.gid)"/></td>
</tr>
</table>
<input type="button" value="清空购物车" ng-click="clear()" />
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.shops = [{
"gid": 001,
"gname":"手机",
"gnum": 3,
"gprice": 1000,
"gcount": 3000
}, {
"gid": 002,
"gname": "电脑",
"gnum": 3,
"gprice": 2000,
"gcount": 6000
}, {
"gid": 003,
"gname": "电视",
"gnum": 6,
"gprice": 500,
"gcount": 3000
}];
//初始化排序值
$scope.byprice = "gprice";
//定义删除的方法
$scope.del = function(id){
for(var i=0;i<$scope.shops.length;i++) {
if ($scope.shops[i].gid==id) {
$scope.shops.splice(i,1);
break;
}//判断对应的id
}//for循环
}
$scope.delbynum = function(id){
for (var i=0;i<$scope.shops.length;i++) {
if ($scope.shops[i].gid==id) {
if ($scope.shops[i].gnum==0) {
$scope.shops.splice(i,1);
break;
}//判断在数量等于0后删除
}//确认那一条数据
}//for循环
}
//清空数据
$scope.clear = function(){
$scope.shops=[];
}
});
</script>
</body>
angularjs小练习
最新推荐文章于 2021-03-03 17:20:15 发布