<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<center>
<br>
<div>
商品名称:<input type = "text" ng-model="name" placeholder="请输入商品名称"/>
商品价格:<input type = "number" ng-model="price" placeholder="请输入商品价格"/>
商品数量:<input type = "number" ng-model="number" placeholder="请输入商品数量"/>
商品类型:<input type = "text" ng-model="type" placeholder="请输入商品类型"/>
<input type = "button" value = "添加" ng-click="Add()" />
</div><br>
查询:<input type = "text" ng-model="select" placeholder="请输入表格模块内的关键字"/>
排序:<select ng-model="orderKey">
<option selected="selected">---请选择---</option>
<option value= "price">价格正序</option>
<option value= "-price">价格倒序</option>
<option value= "number">数量正序</option>
<option value= "-number">数量倒序</option>
</select>
<table border="1" bordercolor="red">
<tr>
<th><input type = "checkbox" ng-model="checkAll"/></th>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>+</th>
<th>数量</th>
<th>-</th>
<th>类别</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in Goods | filter:select | orderBy:orderKey" class = "{{$index%2? 'red':'pink'}}">
<th><input type = "checkbox" ng-model="checkAll"/></th>
<th>{{$index}}</th>
<th>{{g.name}}</th>
<th id = "price">{{g.price}}</th>
<th><input type= "button" value= "-" id="jian" /></th>
<th id = "number">{{g.number}}</th>
<th><input type= "button" value= "+" id="jia" /></th>
<th>{{g.type}}</th>
<th id = "OldNumberAndPrice">{{g.price * g.number}}</th>
<th><input type = "button" value = "删除" ng-click="delete(g.name)"/>
<input type = "button" value = "修改" ng-click="HXupdate(g.name)"/></th>
</tr>
</table><br>
<input type = "button" value = "批量删除" ng-click="deleteAll()" />
<div>
<h3>修改</h3>
商品名称:<input type = "text" ng-model="gname"/>
商品价格:<input type = "number" ng-model="gprice"/>
商品数量:<input type = "number" ng-model="gnumber"/>
商品类型:<input type = "text" ng-model="gtype"/>
<input type = "button" value = "修改" ng-click="Update()" />
</div><br>
</center>
<script>
var app = angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
//全选全不选
$scope.checkAll = false;
//关键字查询
$scope.select = "";
//排序
$scope.orderKey = "";
$scope.Goods = [ //定义商品的数组数据
{"name":"iphoneX","price":8600,"number":10,"type":"手机"},
{"name":"戴尔","price":8600,"number":5,"type":"电脑"},
{"name":"外星人","price":10000,"number":6,"type":"电脑"},
{"name":"惠普","price":5600,"number":7,"type":"电脑"},
{"name":"华为P10保时捷","price":7000,"number":56,"type":"手机"}
];
//定义添加所需要的数据
$scope.name = "";
$scope.price = "";
$scope.number = "";
$scope.type = "";
$scope.Add = function(){ //添加功能
//定义一个对象,向对象内添加所需要的数据
var good = {}
good.name = $scope.name;
good.price = $scope.price;
good.number = $scope.number;
good.type = $scope.type;
//再把 该对象内的数据添加网络数据中 实现在展示页面
$scope.Goods.push(good);
}
$scope.delete = function(name){ //绑定一个单击删除事件
//进入循环做判断 如果数组.name == 传过来的name值 就进入判断失败他
for(var i = 0;i<$scope.Goods.length;i++){
if($scope.Goods[i].name ==name){
$scope.Goods.splice(i,1)
}
}
}
//准备修改的各个字段
$scope.gname = "";
$scope.gprice = "";
$scope.gnumber = "";
$scope.gtype = "";
$scope.Showupdate = ""; //找到需要回显的内一条数据
//然后 存放在ShowUpdate 字段中 再赋值给 修改模块中的各个字段
$scope.HXupdate = function(name){
for(var i = 0;i<$scope.Goods.length;i++){
if($scope.Goods[i].name == name){
$scope.Showupdate = $scope.Goods[i];
}
}
//把循环出来的数据 放进修改模块对应的框内
$scope.gname = $scope.Showupdate.name;
$scope.gprice = $scope.Showupdate.price;
$scope.gnumber = $scope.Showupdate.number;
$scope.gtype = $scope.Showupdate.type;
}
//把修改模块中的 文本值再赋值给 循环出来的字段(等于 赋值给了表格中各个字段 再做数组循环 )
$scope.Update = function(){
$scope.Showupdate.name = $scope.gname;
$scope.Showupdate.price = $scope.gprice;
$scope.Showupdate.number = $scope.gnumber;
$scope.Showupdate.type = $scope.gtype;
}
$scope.deleteAll = function(){
if($scope.checkAll){ //如果checkAll == true 就等于checkAll已经全部选中 就把网络请求的数据全部删除
$scope.Goods = [];
}else{
//否则 循环选中的多选框 删除
var check = $(":checkbox:checked");
for(var i = check.length-1;i>=0;i--){
$scope.Goods.splice(check[i].value,1);
}
}
}
$(document).on("click","#jian",function(){
//获得旧的数量框
var oldnumber = $("#number").html();
//把旧的数量框进行-1 的操作(效果是 当减1以后 小计也要变)
var newnumber = oldnumber-1;
if(newnumber <= 0){
alert("当前数量为0 不能再减啦!");
}
//把新的数量框给 id为number的表格中的th
$("#number").html(newnumber);
//获取价格和数量进行相乘
var price = $("#price").html();
var sum = parseInt(newnumber *price);
$("#OldNumberAndPrice").html(sum);
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<center>
<br>
<div>
商品名称:<input type = "text" ng-model="name" placeholder="请输入商品名称"/>
商品价格:<input type = "number" ng-model="price" placeholder="请输入商品价格"/>
商品数量:<input type = "number" ng-model="number" placeholder="请输入商品数量"/>
商品类型:<input type = "text" ng-model="type" placeholder="请输入商品类型"/>
<input type = "button" value = "添加" ng-click="Add()" />
</div><br>
查询:<input type = "text" ng-model="select" placeholder="请输入表格模块内的关键字"/>
排序:<select ng-model="orderKey">
<option selected="selected">---请选择---</option>
<option value= "price">价格正序</option>
<option value= "-price">价格倒序</option>
<option value= "number">数量正序</option>
<option value= "-number">数量倒序</option>
</select>
<table border="1" bordercolor="red">
<tr>
<th><input type = "checkbox" ng-model="checkAll"/></th>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>+</th>
<th>数量</th>
<th>-</th>
<th>类别</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in Goods | filter:select | orderBy:orderKey" class = "{{$index%2? 'red':'pink'}}">
<th><input type = "checkbox" ng-model="checkAll"/></th>
<th>{{$index}}</th>
<th>{{g.name}}</th>
<th id = "price">{{g.price}}</th>
<th><input type= "button" value= "-" id="jian" /></th>
<th id = "number">{{g.number}}</th>
<th><input type= "button" value= "+" id="jia" /></th>
<th>{{g.type}}</th>
<th id = "OldNumberAndPrice">{{g.price * g.number}}</th>
<th><input type = "button" value = "删除" ng-click="delete(g.name)"/>
<input type = "button" value = "修改" ng-click="HXupdate(g.name)"/></th>
</tr>
</table><br>
<input type = "button" value = "批量删除" ng-click="deleteAll()" />
<div>
<h3>修改</h3>
商品名称:<input type = "text" ng-model="gname"/>
商品价格:<input type = "number" ng-model="gprice"/>
商品数量:<input type = "number" ng-model="gnumber"/>
商品类型:<input type = "text" ng-model="gtype"/>
<input type = "button" value = "修改" ng-click="Update()" />
</div><br>
</center>
<script>
var app = angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
//全选全不选
$scope.checkAll = false;
//关键字查询
$scope.select = "";
//排序
$scope.orderKey = "";
$scope.Goods = [ //定义商品的数组数据
{"name":"iphoneX","price":8600,"number":10,"type":"手机"},
{"name":"戴尔","price":8600,"number":5,"type":"电脑"},
{"name":"外星人","price":10000,"number":6,"type":"电脑"},
{"name":"惠普","price":5600,"number":7,"type":"电脑"},
{"name":"华为P10保时捷","price":7000,"number":56,"type":"手机"}
];
//定义添加所需要的数据
$scope.name = "";
$scope.price = "";
$scope.number = "";
$scope.type = "";
$scope.Add = function(){ //添加功能
//定义一个对象,向对象内添加所需要的数据
var good = {}
good.name = $scope.name;
good.price = $scope.price;
good.number = $scope.number;
good.type = $scope.type;
//再把 该对象内的数据添加网络数据中 实现在展示页面
$scope.Goods.push(good);
}
$scope.delete = function(name){ //绑定一个单击删除事件
//进入循环做判断 如果数组.name == 传过来的name值 就进入判断失败他
for(var i = 0;i<$scope.Goods.length;i++){
if($scope.Goods[i].name ==name){
$scope.Goods.splice(i,1)
}
}
}
//准备修改的各个字段
$scope.gname = "";
$scope.gprice = "";
$scope.gnumber = "";
$scope.gtype = "";
$scope.Showupdate = ""; //找到需要回显的内一条数据
//然后 存放在ShowUpdate 字段中 再赋值给 修改模块中的各个字段
$scope.HXupdate = function(name){
for(var i = 0;i<$scope.Goods.length;i++){
if($scope.Goods[i].name == name){
$scope.Showupdate = $scope.Goods[i];
}
}
//把循环出来的数据 放进修改模块对应的框内
$scope.gname = $scope.Showupdate.name;
$scope.gprice = $scope.Showupdate.price;
$scope.gnumber = $scope.Showupdate.number;
$scope.gtype = $scope.Showupdate.type;
}
//把修改模块中的 文本值再赋值给 循环出来的字段(等于 赋值给了表格中各个字段 再做数组循环 )
$scope.Update = function(){
$scope.Showupdate.name = $scope.gname;
$scope.Showupdate.price = $scope.gprice;
$scope.Showupdate.number = $scope.gnumber;
$scope.Showupdate.type = $scope.gtype;
}
$scope.deleteAll = function(){
if($scope.checkAll){ //如果checkAll == true 就等于checkAll已经全部选中 就把网络请求的数据全部删除
$scope.Goods = [];
}else{
//否则 循环选中的多选框 删除
var check = $(":checkbox:checked");
for(var i = check.length-1;i>=0;i--){
$scope.Goods.splice(check[i].value,1);
}
}
}
$(document).on("click","#jian",function(){
//获得旧的数量框
var oldnumber = $("#number").html();
//把旧的数量框进行-1 的操作(效果是 当减1以后 小计也要变)
var newnumber = oldnumber-1;
if(newnumber <= 0){
alert("当前数量为0 不能再减啦!");
}
//把新的数量框给 id为number的表格中的th
$("#number").html(newnumber);
//获取价格和数量进行相乘
var price = $("#price").html();
var sum = parseInt(newnumber *price);
$("#OldNumberAndPrice").html(sum);
});
});
</script>
</body>
</html>
1774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
