当前位置: 首页 > 工具软件 > Android Angle > 使用案例 >

angle

章承
2023-12-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 
<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.goods = 
[
{"id":1,"name":"小米5","count":2,"price":1600,"product":"北京"},
{"id":2,"name":"华为p10","count":2,"price":4200,"product":"东莞"},
{"id":3,"name":"vivox20","count":2,"price":2600,"product":"佛山"}
];


//查询关键字
$scope.seacherKey = "";
//排序关键字
$scope.orderKey = "";
//全选复选框的绑定字段
$scope.checkAll = false;

//显示添加模块,,默认不显示
$scope.showAdd = false;

//创建和新增商品信息相绑定的字段属性
$scope.name = "";
$scope.price = "";
$scope.product = "";
//添加按钮的点击事件
$scope.addGood = function(){
var good = {};
good.name = $scope.name;//把输入的商品名称给 good对象
good.price = $scope.price;
good.product = $scope.product;
//把good添加到  goods数组中,数据源
$scope.goods.push(good);
//隐藏添加区域
$scope.showAdd = false;
//显示table
$scope.showTable = true;
}

//控制table是否显示的属性
$scope.showTable = true;
//删除
$scope.deleteGood = function(gname){
// $scope.goods.splice($index,1);//从$index开始,删除1条
//遍历数组,找到要删除的商品
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name == gname){//遍历得到的商品信息就是我们要删除的,,i就是他再数组中的索引
$scope.goods.splice(i,1);
break;//删除后跳出循环
}
}
//如果删光了,隐藏table的头
if($scope.goods.length == 0){
$scope.showTable = false;//隐藏
}
}

//是否显示修改回显区域
$scope.showUpdate = false;
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";

var updateGood = "";//要修改的商品信息
//修改按钮的回调
$scope.showGood = function(gname){//$index表示要修改的数据的索引
//显示修改回显区域
$scope.showUpdate = true;


//遍历数组,找到要修改的商品
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name == gname){//遍历得到的商品信息就是我们要删除的,,i就是他再数组中的索引
updateGood = $scope.goods[i];
break;//找到修改的商品后,跳出循环
}
}
//显示修改信息到页面,,第一步得到修改信息
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;

}
//提交修改
$scope.updateGood = function(){
updateGood.name = $scope.upname;//把新的名字替换旧名字
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//隐藏修改回显区域
$scope.showUpdate = false;
}

//批量删除
$scope.deleteMore = function(){
if($scope.checkAll){//全选打钩,全部打钩,,全删除
$scope.goods = [];
}else{//不是全删除
var checked = $("input[type=checkbox]:checked");//获得所有打钩的复选框
for(var i= checked.length-1;i>=0;i--){//从大往小遍历选中的复选框
$scope.goods.splice(checked[i].value,1);//通过复选框中的索引,到数据源中删除数据,,从下往上删除
}
}
};

//计算商品总数和总价
$scope.zs = "";
$scope.zj = "";
$scope.jsall = function(){
var n = 0;//总数
var allprice = 0;//总价
for(var i=0;i<$scope.goods.length;i++){
var g = $scope.goods[i];//得到商品对象
n = n+g.count; //累加数量

var xj = g.price*g.count;
allprice = allprice+xj;
}
//组装
$scope.zs = "商品总数:"+n;
$scope.zj = "商品总价:"+allprice;

};
//调用函数
$scope.jsall();

$scope.jia = function(index){
var g = $scope.goods[index];
g.count = g.count+1;//数量加1

$scope.jsall();
}
$scope.jian = function(index){
var g = $scope.goods[index];
g.count = g.count-1;//数量加1

$scope.jsall();
}

$scope.clearall = function(){
$scope.goods = [];
}

$scope.mychange = function(){

}

});
</script>
<style>
th,td{
width: 80px;
text-align: center;
}
/**定义两个颜色样式**/
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}

span{
background-color: lightgreen;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<center>
<div>查询:<input type="text" placeholder="请输入查询关键字" ng-model="seacherKey" />&nbsp;&nbsp;&nbsp;&nbsp;
     排序:<select ng-model="orderKey">
      <option value="">--请选择--</option>
      <option value="name">名称正序</option>
      <option value="-name">名称倒序</option>
      <option value="price">价钱正序</option>
      <option value="-price">价钱倒序</option>
     </select>&nbsp;&nbsp;
     <!--是否显示添加区域的快关,,,showAdd=!showAdd 表示 逆操作-->
     <input type="button" value="入库/增加" ng-click="showAdd=!showAdd"/>
</div>
<br />
<div ng-show="showAdd">
商品名称:<input type="text" placeholder="请输入商品名称" ng-model="name"/><br />
商品价钱:<input type="number" placeholder="请输入商品价钱" ng-model="price"/><br />
商品产地:<input type="text" placeholder="请输入商品产地" ng-model="product"/><br />
<input type="button" value="添加" ng-click="addGood();"/>
</div>
<br />
<div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteMore();"/></div><br />
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价钱</th>
<th>数量</th>
<th>小计</th>
<th ng-click="orderKey='product'">产地</th>
<th style="width: 110px;">操作</th>
</tr>
<!--下一行注释的部分:只对 name进行过滤查询-->
<!--<tr ng-repeat="g in goods | filter:{name:seacherKey} " class="{{$index%2? 'yellow':'red'}}" >-->
<tr ng-repeat="g in goods | filter:seacherKey | orderBy:orderKey " class="{{$index%2? 'yellow':'red'}}" >
<td><input type="checkbox" value="{{$index}}" ng-model="checkAll"/></td>
<td>{{$index}}</td><!--系统自动索引-->
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.count}}<input type="button" value="+" ng-click="jia($index);"/><input type="button" value="-" ng-click="jian($index);"/></td>
<td>{{g.price*g.count}}</td>
<td>{{g.product}}</td>
<td >
<input type="button" value="删除" ng-click="deleteGood(g.name);"/>&nbsp;&nbsp;
<input type="button" value="修改" ng-click="showGood(g.name);"/>
</td>
</tr>

</table>
<div >
<button ng-bind="zs"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ng-bind="zj"/><button value="清除" ng-click="clearall();"/>
<input type="number" ng-change="mychange();" value="20"/>
</div>

<br />
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="upname"/><br />
商品价钱:<input type="number" ng-model="upprice"/><br />
商品产地:<input type="text" ng-model="upproduct"/><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();"/>
</div>
<br />
</center>
<p>{{goods}}</p>
</body>
</html>
 类似资料: