添加删除排序

最新推荐文章于 2021-07-24 23:27:25 发布

笑颜888

最新推荐文章于 2021-07-24 23:27:25 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/wangdan209/article/details/79734252

版权

<body ng-app="myapp" ng-controller="mycon">
<button ng-click="isShow=!isShow">新增订单</button>
<button ng-click="delmore()">批量删除</button>
<input type="text" value="" ng-model="sname" placeholder="按商品名称查询"/>
<input type="text" value="" ng-model="stel" placeholder="按手机号查询"/>
<select ng-model="stype">
<option value="">--按状态查询--</option>
<option value="已发货">--已发货--</option>
<option value="未发货">--未发货--</option>
</select>

<table border="1px" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<td></td>
<td>id<button ng-click="orderByid()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="orderByprice()">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="orderBytime()">排序</button></td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in shops|filter:{name:sname,tel:stel,type:stype}|orderBy:ob">
<td><input type="checkbox" value="{{$index}}"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.user}}</td>
<td>{{x.tel}}</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.city}}</td>
<td>{{x.times}}</td>
<td>{{x.type}}</td>
</tr>
</tbody>
</table>

<fieldset id="" ng-show="isShow">
<legend>添加订单信息</legend>
<ul>
<li>商品名<input type="text" id="sname"/><span id="nametip"></span> </li>
<li>用户名<input type="text" id="suser"/><span id="usertip"></span> </li>
<li>手机号<input type="text" id="stel"/><span id="teltip"></span> </li>
<li>价格为<input type="text" id="sprice"/><span id="pricetip"></span> </li>
<li>   城市<select class="city" id="scity">
<option value="0">--请选择城市--</option>
<option value="1">上海</option>
<option value="2">北京</option>
</select><span id="citytip"></span> </li>
<li style="margin-left: 100px; margin-top: 15px;"><button ng-click="add()">保存</button></li>
</ul>

</fieldset>

<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.isShow=false;
$scope.shops=[{id:3001,name:"iPhone1",user:"张三",tel:13523345566,price:8699,city:"北京",times:"11-23 10:00:00",type:"已发货"},
{id:6001,name:"iPhone2",user:"李四",tel:13223345566,price:5600,city:"上海",times:"11-23 11:28:00",type:"未发货"},
{id:2001,name:"iPhone3",user:"王五",tel:15223345566,price:5290,city:"天津",times:"11-22 09:00:00",type:"未发货"},
{id:1001,name:"iPhone4",user:"赵六",tel:15923345566,price:6700,city:"河北",times:"11-23 13:17:00",type:"已发货"},
{id:5001,name:"iPhone5",user:"田七",tel:13623345566,price:8780,city:"南京",times:"11-21 12:20:00",type:"已发货"}];
//按id排序
$scope.ob="";
$scope.isclick=true;
$scope.orderByid=function(){
if($scope.isclick){
$scope.ob="id";
$scope.isclick=false;
}else{
$scope.ob="-id";
$scope.isclick=true;
}

}
//按价格排序
$scope.orderByprice=function(){
if($scope.isclick){
$scope.ob="price";
$scope.isclick=false;
}else{
$scope.ob="-price";
$scope.isclick=true;
}
}
//按下单时间排序
$scope.orderBytime=function(){
if($scope.isclick){
$scope.ob="times";
$scope.isclick=false;
}else{
$scope.ob="-times";
$scope.isclick=true;
}
}

//批量删除
$scope.delmore=function(){
var cbs = $("input:checked");
//alert(cbs.length);
//var cheboxs=$("input:checked");
for (var i = 0; i < cbs.length; i++) {
var index=cbs[i].value;
$scope.shops.splice(index,1);

}
}

//添加
$scope.add=function(){
var sname = $("#sname").val();
var suser = $("#suser").val();
var stel = $("#stel").val();
var sprice = $("#sprice").val();
var scity = $("#scity").val();
//验证商品名
if(sname==""){
$("#nametip").html("商品名称不能为空");
$("#nametip").addClass("tip");
$("#sname").css("border","1px solid red");
}else{
$("#nametip").html("");
$("#nametip").removeClass("tip");
$("#sname").css("border","1px solid gray");
}

//验证商品名
if(suser==""){
$("#usertip").html("用户名不能为空");
$("#usertip").addClass("tip");
$("#suser").css("border","1px solid red");
}else{
$("#usertip").html("");
$("#usertip").removeClass("tip");
$("#suser").css("border","1px solid gray");
}

//验证商品名
if(stel==""){
$("#teltip").html("电话号不能为空");
$("#teltip").addClass("tip");
$("#stel").css("border","1px solid red");
}else{
$("#teltip").html("");
$("#teltip").removeClass("tip");
$("#stel").css("border","1px solid gray");
}

//验证商品名
if(sprice==""){
$("#pricetip").html("价格不能为空");
$("#pricetip").addClass("tip");
$("#sprice").css("border","1px solid red");
}else{
$("#pricetip").html("");
$("#pricetip").removeClass("tip");
$("#sprice").css("border","1px solid gray");
}

//验证商品名
if(scity=="0"){
$("#citytip").html("城市不能为空");
$("#citytip").addClass("tip");
$("#scity").css("border","1px solid red");
}else{
$("#citytip").html("");
$("#citytip").removeClass("tip");
$("#scity").css("border","1px solid gray");
}

if(sname!="" && suser!="" && suser!="" && stel!="" &&sprice!="" && scity!="0"){
//创建新对象
var newobc={};
newobc.id="4001";
newobc.name=sname;
newobc.user=suser;
newobc.tel=stel;
newobc.price=sprice;
newobc.city=$("#scity :selected").text();
newobc.times="12-22 08:23:00";
newobc.type="已发货";

$scope.shops.push(newobc);

}

}

});

</script>

</body>

笑颜888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
添加删除排序

&lt;body ng-app="myapp" ng-controller="mycon"&gt; &lt;button ng-click="isShow=!isShow"&gt;新增订单&lt;/button&gt; &lt;button ng-click="delmore()"&gt;批量删除&lt;/button&gt; &lt;
复制链接

扫一扫

添加 删除 排序

添加删除排序