<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../第二周周考模拟/angular.min.js"></script>
<script src="../day03/jquery-1.8.3.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.product=[
{
"id":1,
"name":"小米5",
"price":1600,
"address":"北京"
},
{
"id":2,
"name":"ipone5",
"price":2600,
"address":"深圳"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"address": "佛山"
}
];
$scope.a=false;
$scope.s=true;
$scope.t=false;
//添加
$scope.aa=function(){
var bh={
"name":$scope.name,
"price":$scope.price,
"address":$scope.address
};
$scope.product.push(bh);
$scope.a=false;
$scope.s=true;
}
$scope.sh=function(j){
for (i=0;i<$scope.product.length;i++) {
if(i==j){
$scope.product.splice(i,1);
break;
}
}
if($scope.product.length==0){
$scope.s=false;
}
}
//回显
$scope.update=function(j){
$scope.t=true;
for (i=0;i<$scope.product.length;i++) {
if(i==j){
$scope.upproduct=$scope.product[i];
break;
}
}
$scope.upname=$scope.upproduct.name;
$scope.upprice=$scope.upproduct.price;
$scope.upaddress=$scope.upproduct.address;
}
//修改
$scope.cc=function(){
$scope.upproduct.name=$scope.upname;
$scope.upproduct.price=$scope.upprice;
$scope.upproduct.address=$scope.upaddress;
$scope.t=false;
}
//批量
$scope.plsc=function(){
for (var i = 0; i < $scope.product.length; i++) {
if($scope.product[i].ck){
$scope.product.splice(i,1);
i--;
}
}
}
//+
$scope.jia=function(j){
if($scope.product[j].num<499){
$scope.product[j].num++;
}else{
alert("数量必须在1-500之间");
}
}
$scope.jian=function(j){
if(1<$scope.product[j].num){
$scope.product[j].num--;
}else{
alert("数量必须在1-500之间");
}
}
$scope.tt=function(u){
if(u<1||u>=500){
alert("数量必须在1-500之间");
}
}
$scope.zong=function(){
$scope.zongji=0;
for (var i = 0; i < $scope.product.length; i++) {
$scope.zongji += parseInt($scope.product[i].price) * parseInt($scope.product[i].num)
}
}
});
</script>
<style>
tr{
background: white;
}
.yellow{
background: yellow;
}
.red{
background: red;
}
</style>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div id="first">
查询:<input placeholder="请输入查询关键字" ng-model="n"/>
排序:<select ng-model="y">
<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="a=!a" />
</div>
<div id="second" ng-show="a">
商品名称：<input placeholder="请输入商品名称" ng-model="name"/><br/>
商品价钱：<input placeholder="请输入商品价钱" ng-model="price"/><br/>
商品产地：<input placeholder="请输入商品产地" ng-model="address"/><br/>
<input type="button" value="添加" ng-click="aa()"/>
</div>
<div id="third">
<input type="button" value="批量删除" ng-click="plsc()"/>
</div>
<div id="fourth">
<table cellspacing="1"style="text-align: center;background:red; " ng-show="s">
<tr style="background: grey;">
<td><input type="checkbox" ng-model="m"/></td>
<td>序号</td>
<td>id</td>
<td>商品名称</td>
<td>价钱</td>
<td>数量</td>
<td>小计</td>
<td>产地</td>
<td colspan="2">操作</td>
</tr>
<tr ng-repeat="x in product | filter:n | orderBy : y" class="{{$index%2 ?'yellow':'red'}}">
<td><input type="checkbox" ng-checked="m" ng-model="x.ck"/></td>
<td>{{$index}}</td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td><input type="button" value="+" ng-click="jia($index)"/><input type="number" style="width: 30px;" ng-model="x.num" ng-init="x.num=1" ng-change="tt(x.num)"/><input type="button" value="-" ng-click="jian($index)"/></td>
<td>{{x.xiaoji=x.price*x.num}}</td>
<td>{{x.address}}</td>
<td><input type="button" value="删除" ng-click="sh($index)" style="background: url(img/未.jpg)no-repeat center center;width: 25px; height: 25px; border: 0px;border-radius:15px;color: blueviolet;font-size: 8px;" /></td>
<td><input type="button" value="修改" ng-click="update($index)"/></td>
</tr>
</table>
</div>
<div id="fifth" ng-show="t">
商品名称：<input ng-model="upname"/><br/>
商品价钱：<input ng-model="upprice"/><br/>
商品产地：<input ng-model="upaddress"/><br/>
<input type="button" value="提交修改" ng-click="cc()"/>
</div>
总计：<span ng-bind="zong()">{{zongji}}</span>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../第二周周考模拟/angular.min.js"></script>
<script src="../day03/jquery-1.8.3.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.product=[
{
"id":1,
"name":"小米5",
"price":1600,
"address":"北京"
},
{
"id":2,
"name":"ipone5",
"price":2600,
"address":"深圳"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"address": "佛山"
}
];
$scope.a=false;
$scope.s=true;
$scope.t=false;
//添加
$scope.aa=function(){
var bh={
"name":$scope.name,
"price":$scope.price,
"address":$scope.address
};
$scope.product.push(bh);
$scope.a=false;
$scope.s=true;
}
$scope.sh=function(j){
for (i=0;i<$scope.product.length;i++) {
if(i==j){
$scope.product.splice(i,1);
break;
}
}
if($scope.product.length==0){
$scope.s=false;
}
}
//回显
$scope.update=function(j){
$scope.t=true;
for (i=0;i<$scope.product.length;i++) {
if(i==j){
$scope.upproduct=$scope.product[i];
break;
}
}
$scope.upname=$scope.upproduct.name;
$scope.upprice=$scope.upproduct.price;
$scope.upaddress=$scope.upproduct.address;
}
//修改
$scope.cc=function(){
$scope.upproduct.name=$scope.upname;
$scope.upproduct.price=$scope.upprice;
$scope.upproduct.address=$scope.upaddress;
$scope.t=false;
}
//批量
$scope.plsc=function(){
for (var i = 0; i < $scope.product.length; i++) {
if($scope.product[i].ck){
$scope.product.splice(i,1);
i--;
}
}
}
//+
$scope.jia=function(j){
if($scope.product[j].num<499){
$scope.product[j].num++;
}else{
alert("数量必须在1-500之间");
}
}
$scope.jian=function(j){
if(1<$scope.product[j].num){
$scope.product[j].num--;
}else{
alert("数量必须在1-500之间");
}
}
$scope.tt=function(u){
if(u<1||u>=500){
alert("数量必须在1-500之间");
}
}
$scope.zong=function(){
$scope.zongji=0;
for (var i = 0; i < $scope.product.length; i++) {
$scope.zongji += parseInt($scope.product[i].price) * parseInt($scope.product[i].num)
}
}
});
</script>
<style>
tr{
background: white;
}
.yellow{
background: yellow;
}
.red{
background: red;
}
</style>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div id="first">
查询:<input placeholder="请输入查询关键字" ng-model="n"/>
排序:<select ng-model="y">
<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="a=!a" />
</div>
<div id="second" ng-show="a">
商品名称：<input placeholder="请输入商品名称" ng-model="name"/><br/>
商品价钱：<input placeholder="请输入商品价钱" ng-model="price"/><br/>
商品产地：<input placeholder="请输入商品产地" ng-model="address"/><br/>
<input type="button" value="添加" ng-click="aa()"/>
</div>
<div id="third">
<input type="button" value="批量删除" ng-click="plsc()"/>
</div>
<div id="fourth">
<table cellspacing="1"style="text-align: center;background:red; " ng-show="s">
<tr style="background: grey;">
<td><input type="checkbox" ng-model="m"/></td>
<td>序号</td>
<td>id</td>
<td>商品名称</td>
<td>价钱</td>
<td>数量</td>
<td>小计</td>
<td>产地</td>
<td colspan="2">操作</td>
</tr>
<tr ng-repeat="x in product | filter:n | orderBy : y" class="{{$index%2 ?'yellow':'red'}}">
<td><input type="checkbox" ng-checked="m" ng-model="x.ck"/></td>
<td>{{$index}}</td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td><input type="button" value="+" ng-click="jia($index)"/><input type="number" style="width: 30px;" ng-model="x.num" ng-init="x.num=1" ng-change="tt(x.num)"/><input type="button" value="-" ng-click="jian($index)"/></td>
<td>{{x.xiaoji=x.price*x.num}}</td>
<td>{{x.address}}</td>
<td><input type="button" value="删除" ng-click="sh($index)" style="background: url(img/未.jpg)no-repeat center center;width: 25px; height: 25px; border: 0px;border-radius:15px;color: blueviolet;font-size: 8px;" /></td>
<td><input type="button" value="修改" ng-click="update($index)"/></td>
</tr>
</table>
</div>
<div id="fifth" ng-show="t">
商品名称：<input ng-model="upname"/><br/>
商品价钱：<input ng-model="upprice"/><br/>
商品产地：<input ng-model="upaddress"/><br/>
<input type="button" value="提交修改" ng-click="cc()"/>
</div>
总计：<span ng-bind="zong()">{{zongji}}</span>
</center>
</body>
</html>