月考模擬
阿新 • • 發佈：2018-11-30
<!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){
{
"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.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++) {
$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){
{
"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.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++) {
$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>