AngularJS商品管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41701790/article/details/79718822

<!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.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.phones="";
$http({
method:"get",
url:"phones.json"
}).then(function success(response){
$scope.phones=response.data;
},function error(response){

}).finally();

//模糊查询
$scope.mhcx="";
//排序
$scope.px="";
//定义要添加字段
$scope.id="";
$scope.pname="";
$scope.uanme="";
$scope.pno="";
$scope.price="";
$scope.city="";
$scope.time="";
//定义显示添加模块
$scope.showAdd=false;
//添加函数
$scope.Add=function(){
var phone={};
phone.id=$scope.id;
phone.pname=$scope.pname;
phone.uname=$scope.uname;
phone.pno=$scope.pno;
phone.price=$scope.price;
phone.city=$scope.city;
phone.time=$scope.time;
$scope.phones.push(phone);
}
//定义显示商品信息字段
$scope.showTable=true;
//删除
$scope.Del=function(gid){
for (var i=0;i<$scope.phones.length;i++) {
if($scope.phones[i].id==gid){
$scope.phones.splice(i,1);
$sc
break;
}
}
if($scope.phones.length==0){
$scope.showTable=false;
}
}
//批量删除
$scope.plsc=function(){
$(":checkbox:checked").each(function(){
var ids=$(this).val();
for (var i=0;i<$scope.phones.length;i++) {
if($scope.phones[i].id==ids)
$scope.phones.splice(i,1);
}
});
if($scope.phones.length==0){
$scope.showTable=false;
}
}
//定义显示修改的模块
$scope.showUp=false;
//定义要修改的字段
$scope.uppname="";
$scope.upuanme="";
$scope.uppno="";
$scope.upprice="";
$scope.upcity="";
var uphone="";
$scope.UP=function(gid){
$scope.showUp=true;
for (var i=0;i<$scope.phones.length;i++) {
if($scope.phones[i].id==gid){
uphone=$scope.phones[i];
}
}
$scope.uppname=uphone.pname;
$scope.upuname=uphone.uname;
$scope.uppno=uphone.pno;
$scope.upprice=uphone.price;
$scope.upcity=uphone.city;
}
//确定修改
$scope.update=function(){
uphone.pname=$scope.uppname;
uphone.uname=$scope.upuname;
uphone.pno=$scope.uppno;
uphone.price=$scope.upprice;
uphone.city=$scope.upcity;
$scope.showUp=false;
}
//点击排序
$scope.myorder="";

});
//全选不选
$(function(){
$("#check").click(function(){
$(":checkbox:gt(0)").prop("checked",$(this).prop("checked"));
});
});
</script>
<style>
.a{
background-color: greenyellow;
}
.b{
background-color: cornflowerblue;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
模糊查询:<input type="text" ng-model="mhcx" placeholder="请按商品名称进程查询..."/>
排序:<select ng-model="px">
<option value="">--请选择--</option>
<option value="-id">商品编号倒序</option>
<option value="id">商品编号正序</option>
<option value="price">商品价格正序</option>
<option value="-price">商品价格倒序</option>
</select>
<input type="button" value="显示/隐藏添加模块" ng-click="showAdd=!showAdd" />
<br />
<br />
<div ng-show="showAdd">
商品编号:<input type="text" ng-model="id" placeholder="请输入商品编号..."/><br />
商品名称:<input type="text" ng-model="pname" placeholder="请输入商品名称..."/><br />
用户姓名:<input type="text" ng-model="uname" placeholder="请输入用户姓名..."/><br />
机主电话:<input type="text" ng-model="pno" placeholder="请输入用户电话..."/><br />
商品价格:<input type="text" ng-model="price" placeholder="请输入商品价格..."/><br />
商品产地:<input type="text" ng-model="city" placeholder="请输入商品产地..."/><br />
生产日期:<input type="text" ng-model="time" placeholder="请输入生产日期 ..."/><br />
<input type="button" value="添加" ng-click="Add();"/>
</div>
<br />
<input type="button" value="批量删除" ng-click="plsc();"/>
<br />
<br />
<div ng-show="showTable">
<table border="1" cellspacing="0">
<tr bgcolor="darkgray">
<td><input type="checkbox" id="check" ></td>
<td>商品编号</td>
<td>商品名称</td>
<td ng-click="myorder='-uname'">用户姓名</td>
<td>用户电话</td>
<td>商品价格</td>
<td>商品产地</td>
<td>生产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in phones | filter:{pname:mhcx} | orderBy:px |orderBy:myorder" class={{$index%2?'a':'b'}}>
<td><input type="checkbox" value="{{g.id}}"></td>
<td>{{g.id}}</td>
<td>{{g.pname}}</td>
<td>{{g.uname}}</td>
<td>{{g.pno}}</td>
<td>{{g.price}}</td>
<td>{{g.city}}</td>
<td>{{g.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<input type="button" value="删除" ng-click="Del(g.id);"/>
<input type="button" value="修改" ng-click="UP(g.id);" />
</td>
</tr>
</table>
</div>
<br/>
<div ng-show="showUp">
商品名称:<input type="text" ng-model="uppname" /><br />
用户姓名:<input type="text" ng-model="upuname" /><br />
机主电话:<input type="text" ng-model="uppno" /><br />
商品价格:<input type="text" ng-model="upprice" /><br />
商品产地:<input type="text" ng-model="upcity" /><br />
<input type="button" value="确认修改" ng-click="update();"/>
</div>
</center>
</body>
</html>