学习代码的好处

最新推荐文章于 2024-04-27 03:07:20 发布

qq_41880254

最新推荐文章于 2024-04-27 03:07:20 发布

阅读量707

点赞数 1

本文链接：https://blog.csdn.net/qq_41880254/article/details/79784472

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<style>
table tr:nth-child(2n+1){
background: red;
}
table tr:nth-child(2n){
background: yellowgreen;
}
a{
text-decoration: none;
}
</style>
<script>
var app=angular.module("xuexi",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(a){
$scope.datas=a
})
//修改回显
$scope.up=function(gname){

for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].gname==gname){
$scope.update=$scope.datas[i]
break;
}
}
$scope.cc=true
}
//修改
$scope.update1=function(){

var name=$scope.gname
for (var i=0;i<$scope.update.length;i++) {
if($scope.update[i].name==gname){
$scope.update[i]=$scope.update
break
}
}
$scope.cc=false;
}
$scope.insert=function(){
$scope.ab=true;
}
$scope.add=function(){
var gname=$scope.gname
var uname=$scope.uname
var tel=$scope.tel
var price=$scope.price
var city=$scope.city
var regdate=$scope.regdate
var state=$scope.state
$scope.datas.push({gname:$scope.gname,uname:$scope.uname,tel:$scope.tel,price:$scope.price,
city:$scope.city,regdate:$scope.regdate,state:$scope.state})
alert("保存成功");
$scope.ab=false

}
//获取全选全不选
$scope.qx=function(){
var s=$scope.ld
for (var i in $scope.datas) {
$scope.datas[i].ldd=s
}
}
//批量删除
$scope.del=function(){
for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].ldd){
$scope.datas.splice(i,1)
i--
}else{
alert("请选择你要删除的数据");
}
}
}
//查询
$scope.selt=function(){

$scope.test1=$scope.test
$scope.test2=$scope.xue
$scope.test3=$scope.tai
}
//删除
$scope.delete=function(ids){
$scope.datas.splice(ids,1);
}
//排序


})
</script>
</head>
<body ng-app="xuexi" ng-controller="ctrl">

                            
  
     <button ng-click="insert()">新增订单</button>
  <button ng-click="del()">批量删除</button>
<input type="text" ng-model="test" placeholder="按商品名查询" />
<input type="tel" ng-model="xue" placeholder="按手机号查询" />
<select ng-model="tai" >
<option value="">按状态查询</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="selt()">搜索</button>
<form ng-show="ab">
商品名:<input ng-model="gname" /><br />
用户名:<input ng-model="uname" /><br />
手机号:<input ng-model="tel" /><br />
价格:<input ng-model="price" /><br />
城市:<select ng-model="city">
<option>北京</option>
<option>上海</option>
<option>山东</option>
<option>山西</option>
</select><br />
下单时间:<input ng-model="regdate" /><br />
状态:<input ng-model="state" /><br />

<button ng-click="add()">保存</button>

</form>

<table align="center" border="1px" >
<tr>
<th><input type="checkbox" ng-model="ld" ng-click="qx()" </th>
<th>id<button ng-click="px='id';sj=!sj">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="px='price';sj=!sj">排序</button> </th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th colspan="2" align="center">操作</th>
</tr>
<tr ng-repeat="a in datas|filter:{gname:test1,tel:xue,state:tai}|orderBy:px:js">
<th><input type="checkbox" ng-model="a.ldd" /> </th>
<th>{{a.id}}</th>
<th>{{a.gname}}</th>
<th>{{a.uname}}</th>
<th>{{a.tel}}</th>
<th>{{a.price}}</th>
<th>{{a.city}}</th>
<th>{{a.regdate | date:'yyyy-MM-dd hh:mm:ss'}}</th>
<th>
<span style="background: gold;" ng-show="a.state=='已发货'">已发货</span>
<span style="background: palevioletred;" ng-show="a.state=='未发货'">
<a href="#" ng-click="a.state='已发货'">未发货</a>
</span>
</th>
<th><button ng-click="up(a.gname)" value="修改">修改</button></th>
<th><button ng-click="delete($index)">删除</button></th>
</tr>
</table>
<form ng-show="cc">
id:<input ng-model="update.id"/><br />
商品名:<input ng-model="update.gname" /><br />
用户名:<input ng-model="update.uname" /><br />
手机号:<input ng-model="update.tel" /><br />
价格:<input ng-model="update.price" /><br />

城市:<select ng-model="update.city">
<option value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>山东</option>
<option>山西</option>
</select><br />
下单时间:<input ng-model="update.regdate" /><br />
状态:<input ng-model="update.state" /><br />
<button ng-click="update1()">修改</button>
</form>
</body>

</html>