<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
var app=angular.module("myapp",[]).controller("myctrl",function ($scope,$http) {
$http.get("good.json").then(function (success) {
$scope.good=success.data;
});
$http.get("addr.json").then(function (success) {
$scope.addr=success.data;
$scope.province=$scope.addr[0];
$scope.city=$scope.province.citys[0];
});
$scope.flag=false;
$scope.ckchange=function () {
for (var i = 0; i < $scope.good.length; i++) {
$scope.good[i].ck=$scope.checked;
}
}
$scope.plsc=function () {
for (var i = 0; i < $scope.good.length; i++) {
if($scope.good[i].ck&&$scope.good[i].state=='已发货'){
$scope.good.splice(i,1);
i--;
}else{
$scope.good[i].ck=false;
$scope.checked=false;
}
}
}
$scope.change=function () {
$scope.city=$scope.province.citys[0];
}
$scope.bc=function () {
$(".s1").val("");
var gname=$scope.gname;
var uname=$scope.uname;
var tel=$scope.tel;
var price=$scope.price;
var province=$scope.province.province;
if(gname==""||gname==null){
$("#s1").text("商品名不能为空");
return;
}else{
$("#s1").text();
}
if(uname==""||uname==null){
$("#s2").text("用户名不能为空");
return;
}else{
$("#s2").text("");
}
if(tel==""||tel==null){
$("#s3").text("电话不能为空");
return;
}else{
$("#s3").text("");
}
if(price==""||price==null){
$("#s4").text("价格不能为空");
return;
}else{
$("#s4").text("");
}
$scope.good.push({
city: province,
gname: gname,
id: 2001,
price: price,
regdate: new Date(),
state: "未发货",
tel: tel,
uname: uname
});
$scope.flag=false;
}
});
</script>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag=true">新增订单</button>
<button ng-click="plsc()">批量删除</button>
<input type="text" placeholder="按商品名称查询..." ng-model="name"/>
<input type="text" placeholder="按手机号查询..." ng-model="gtel"/>
<select ng-model="state">
<option value="">--按状态查询--</option>
<option value="已发货">--已发货--</option>
<option value="未发货">--未发货--</option>
</select>
<table border="1" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td><input type="checkbox" ng-model="checked" ng-change="ckchange()"/></td>
<td>id<button ng-click="px='id';aa=!aa">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';aa=!aa">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='regdate';aa=!aa">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="s in good|orderBy:px:aa|filter:{'gname':name,'tel':gtel,'state':state}">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.id}}</td>
<td>{{s.gname}}</td>
<td>{{s.uname}}</td>
<td>{{s.tel}}</td>
<td>{{s.price|currency:"¥:"}}</td>
<td>{{s.city}}</td>
<td>{{s.regdate|date:"MM-dd hh-mm-ss"}}</td>
<td>
<button ng-show="s.state=='已发货'" style="background-color: green;">{{s.state}}</button>
<button ng-show="s.state=='未发货'" ng-click="s.state='已发货'" style="background-color: yellow;">{{s.state}}</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名:<input type="text" ng-model="gname"/><span id="s1" class="s"></span><br />
用户名:<input type="text" ng-model="uname"/><span id="s2" class="s"></span><br />
手机号:<input type="text" ng-model="tel"/><span id="s3" class="s"></span><br />
价格为:<input type="text" ng-model="price"/><span id="s4" class="s"></span><br />
城市<select ng-model="province" ng-change="change()" ng-options="p.province for p in addr"></select>
<select ng-model="city" ng-options="c.city for c in province.citys"></select>
<br />
<input type="button" value="保存" ng-click="bc()"/>
</form>
</body>
</html>
Angular Js如何实现发货
猜你喜欢
转载自blog.csdn.net/w2597645565/article/details/79812326
今日推荐
周排行