sdas<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../js/angular.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods = [{
"id":1,
"name":"小米8",
"price":4999,
"count":2
},{
"id":2,
"name":"华为mateRS",
"price":14999,
"count":1
},{
"id":3,
"name":"三星S9+",
"price":5499,
"count":3
}];
//添加
$scope.addGood = function(){
var good = {};
//id非空验证
if($scope.id == "" || $scope.id == null){
$scope.showId = true;
return;
}else{
good.id = $scope.id;
$scope.showId = false;
}
//姓名非空验证
if($scope.name == null || $scope.name == ""){
$scope.showName = true;
return;
}else{
good.name = $scope.name;
$scope.showName = false;
}
//数量非空验证
if($scope.count == null || $scope.count == ""){
$scope.showCount = true;
return;
}else{
good.count = $scope.count;
$scope.showCount = false;
}
//价格非空验证
if($scope.price == "" || $scope.price == null){
$scope.showPrice = true;
return;
}else{
good.price = $scope.price;
$scope.showPrice = false;
}
$scope.goods.push(good);
//添加之后添加模块隐藏
$scope.showAdd = false;
//添加的信息显示到列表
$scope.showTable = true;
}
$scope.showTable = true;
//删除
$scope.del = function(gname){
for (var i = 0;i<$scope.goods.length;i++) {
if($scope.goods[i].name == gname){
$scope.goods.splice(i,1);
}
}
if($scope.goods.length == 0){
$scope.showTable = false;
}
}
//排序
$scope.orderKey = "";
//查询
$scope.selectKey = "";
$scope.checkAll = false;
$scope.deleteAll = function(){
if($scope.checkAll){
$scope.goods=[];
}else{
var checked = $scope("input[type=checkbox]:checked")
for (var i = 0; i<checked.length - 1;i--) {
$scope.goods.splice(checked[i].value,1);
}
}
}
$scope.showUpdate = false;
$scope.uname = "";
$scope.count = "";
$scope.price = "";
var updateGood = "";
$scope.update = function(gname){
$scope.showUpdate = "true";
for(var i = 0;i<$scope.goods.length;i++){
if ($scope.goods[i].name == gname) {
updateGood = $scope.goods[i];
break;
}
}
$scope.uname = updateGood.name;
$scope.ucount = updateGood.count;
$scope.uprice = updateGood.price;
}
$scope.updateGood = function(){
updateGood.name = $scope.uname;
updateGood.count = $scope.ucount;
updateGood.price = $scope.uprice;
$scope.showUpdate = true;
}
$scope.showUpdate = false;
});
</script>
<style type="text/css">
table{
width: 800px;
text-align: center;
}
span{
color: red;
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询:<input type="text" placeholder="请输入要查询的关键字" ng-model="selectKey"/>
排序:
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="-name">名称正序</option>
<option value="name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<input type="button" value="入库/增加" ng-click="showAdd = !showAdd" />
</div>
<div ng-show="showAdd">
商品编号:<input type="text" ng-model="id" placeholder="请输入商品编号" />
<span ng-show="showId">*Id不可为空</span><br>
商品名称:<input type="text" ng-model="name" placeholder="请输入商品名称" />
<span ng-show="showName">*姓名不可为空</span><br>
商品价格:<input type="text" ng-model="price" placeholder="请输入商品价格" />
<span ng-show="showPrice">*价格不可为空</span><br>
商品数量:<input type="number" ng-model="count" placeholder="请输入商品数量" />
<span ng-show="showCount">*数量不可为空 </span><br>
<input type="button" value="添加" ng-click="addGood()" id = "add" />
</div>
<div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteAll();" /></div>
<table border="1" ng-show="showTable">
<tr>
<td>
<input type="checkbox" ng-model="checkAll"/>
</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品小计</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="g in goods | orderBy:orderKey | filter:selectKey">
<td>
<input type="checkbox" ng-model="checkAll"/>
</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.count}}</td>
<td>￥:{{g.count * g.price}}</td>
<td>
<input type="button" value="删除" ng-click="del(g.name)" />
<input type="button" value="修改" ng-click="update(g.name)"/>
</td>
</tr>
</table>
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="uname"/><br>
商品数量:<input type="text" ng-model="ucount" /><br>
商品价格:<input type="text" ng-model="uprice" /><br>
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>
</center>
</body>
</html>