<head>charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" c
<style type="text/css">
img {
<meta charset="utf-8" />
<script src="js/angularjs1.4.js" type="text/javascript" harset="utf-8"></script>
<title></title>
height: 60px;
width: 60px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="by">
<option value="">--请选择--</option>
<option value="price">价格正序</option>
<option value="-price">价格倒叙</option>
<option value="regDate">时间正序</option>
<option value="-regDate">时间倒叙</option>
</select>
<br>
<input type="text" placeholder="根据名字进行查询" ng-model="name" />
<br>
<select ng-model="by2">
<option value="">--请状态查询--</option>
<option value="已发货">发货</option>
<option value="未发货">未发货</option>
</select>
<br>
<input type="button" value="全选" ng-click="qx()" />
<input type="button" value="全不选" ng-click="qbx()" />
<table border="1px" cellspacing="0" cellpadding="0">
<tr ng-repeat="phone in phones|filter:name|orderBy:by|filter:by2">
<td><input type="checkbox" ng-model="phone.ck" /></td>
<td><img src="img/one.png" /></td>
<td>{{phone.gname}}</td>
<td>{{phone.address}}</td>
<td>{{phone.regDate|date:"yyyy-MM-dd"}}</td>
<td>{{phone.price|currency:"￥:"}}</td>
<!--
注意语法
-->
<td>
<input type="text" ng-model="phone.num" />
</td>
<td>{{phone.price*phone.num|currency:"￥:"}}</td>
<td>{{phone.state}}</td>
<td>
<input type="button" name="" id="" value="修改" ng-click="xiugai(phone)" />
<input type="button" name="" id="" value="删除" ng-click="dele(phone.gname)" />
</td>
</tr>
</table>
<span>
总价:{{sum()|currency:"￥:"}}
</span>
<br>
<input type="button" value="增加" ng-click="show()" />
<input type="button" value="批量删除" ng-click="piliang()" />
<!--
添加
-->
<div class="add" ng-show="add_show">
<fieldset style="width: 300px;height: 250px;">
<legend>添加信息</legend>
<input type="text" placeholder="商品不能为空" ng-model="gname12" /><br>
<input type="text" placeholder="价格大于0" ng-model="price12" /><br>
<input type="text" placeholder="数量大于0" ng-model="num12" /><br> 请选择：
<br>
<select class="sheng" ng-model="sheng12">
</select>
<select class="shi" ng-model="shi12">
</select>
<input type="button" value="提交" ng-click="save()" />
</fieldset>
</div>
<!--
修改
-->
<div class="xiu_view" ng-show="xiu_show">
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" ng-model="phone.ck" /></td>
<td><img src="img/one.png" /></td>
<td>{{name123}}</td>
<td>{{address123}}</td>
<td>{{time123|date:"yyyy-MM-dd"}}</td>
<td>{{price123|currency:"￥:"}}</td>
<!--
注意语法
-->
<td>
<input type="text" ng-model="num123" />
</td>
<td>{{xj|currency:"￥:"}}</td>
<td>{{state123}}</td>
<td>
<input type="button" name="" id="" value="保存" ng-click="save123()" />
<input type="button" name="" id="" value="删除" ng-click="dele(phone.gname)" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//--------------二级列表
var arr = new Array();
arr["北京"] = new Array("西二旗", "榆垡");
arr["辽宁"] = new Array("沈阳", "大连");
//填充省的信息
for(var s in arr) {
$(".sheng").append("<option>" + s + "</option>");
}
$(".sheng").change(function() {
var sh = $(this).val();
var shis = arr[sh];
$(".shi").empty();
for(var i = 0; i < shis.length; i++) {
var shi = shis[i];
$(".shi").append("<option>" + shi + "</option>");
}
});
//--------------angularjs
var m = angular.module("myApp", []);
m.controller("myCtrl", function($scope, $http) {
$scope.phones = [];
//获取数据
$http.get("phones.json").then(function(response) {
$scope.phones = response.data;
});
//全选
$scope.qx = function() {
for(var i = 0; i < $scope.phones.length; i++) {
var g = $scope.phones[i];
g.ck = true;
}
}
$scope.qbx = function() {
for(var i = 0; i < $scope.phones.length; i++) {
var g = $scope.phones[i];
g.ck = false;
}
}
//计算总价
$scope.sum = function() {
var s = 0;
for(var i = 0; i < $scope.phones.length; i++) {
var g = $scope.phones[i];
var xj = g.num * g.price;
s += xj;
}
return s;
}
//单个删除
$scope.dele = function(gname) {
var b = confirm("确定删除吗？");
if(b) {
for(var i = 0; i < $scope.phones.length; i++) {
var g = $scope.phones[i];
if(g.gname == gname) {
$scope.phones.splice(i, 1);
}
}
}
}
//批量删除
$scope.piliang = function() {
var flag = false;
var b = confirm("确定删除吗？");
if(b) {
for(var i = $scope.phones.length - 1; i >= 0; i--) {
var g = $scope.phones[i];
if(g.ck) {
flag = true;
$scope.phones.splice(i, 1);
}
}
}
if(flag == false) {
alert("选一个呀")
}
}
//添加，提交
$scope.save = function() {
//验证名字
var gname = $scope.gname12;
if(gname == "" || gname == null || gname == undefined) {
alert("名字不为空");
return;
}
//验证价格
var price12 = $scope.price12;
if(price12 == "" || price12 == null || price12 == undefined) {
alert("价格不为空");
return;
}
if(price12 < 0) {
alert("价格需要大于0")
return;
}
//验证数量
var num12 = $scope.num12;
if(num12 == "" || num12 == null || num12 == undefined) {
alert("数量不为空");
return;
}
if(num12 < 0) {
alert("数量需要大于0")
return;
}
//地址
var shi = $(".shi").val();
//创建对象
var obj = {
"gname": gname,
"address": shi,
"num": num12,
"regDate": "1371120093221",
"price": price12,
"state": "未发货"
};
$scope.phones.push(obj);
//移仓添加页面
$scope.add_show = false;
}
//显示添加页面
$scope.show = function() {
$scope.add_show = true;
}
//修改
$scope.xiugai = function(phone) {
//显示修改页面
$scope.xiu_show = true;
//回显数据
$scope.name123 = phone.gname;
$scope.address123 = phone.address;
$scope.time123 = phone.regDate;
$scope.price123 = phone.price;
$scope.state123 = phone.state;
$scope.num123 = phone.num;
$scope.xj = phone.price * phone.num;
}
//修改完毕之后的保存
$scope.save123 = function() {
//验证名字
var gname = $scope.name123;
//验证价格
var price12 = $scope.price123;
//验证数量
var num12 = $scope.num123;
//地址
var shi = $scope.address123;
//创建对象
var obj = {
"gname": gname,
"address": shi,
"num": num12,
"regDate": "1371120093221",
"price": price12,
"state": "未发货"
};
for(var i = $scope.phones.length - 1; i >= 0; i--) {
var g = $scope.phones[i];
if(g.gname == gname) {
$scope.phones.splice(i, 1, obj);
}
}
//修改页面后，修改页面消失
$scope.xiu_show = false;
//移仓添加页面
// $scope.add_show = false;
}
});
</script>
</body>
增删改查angular
猜你喜欢
转载自blog.csdn.net/qq_42970131/article/details/82796956
今日推荐
周排行