<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
font-size: 13px;
color: #2F4F4F;
}
body {
background-image: url(img/5ab1258a590c8.gif);
background-size: cover;
}
#main {
width: 1000px;
margin: 0 auto;
background-color: rgba(200, 200, 200, 0.3);
text-align: center;
}
tr:nth-child(even) {
background-color: whitesmoke;
}
tr:nth-child(odd) {
background-color: white;
}
#bt {
background-color: lightgray;
}
table {
width: 95%;
margin: 0 auto;
padding-bottom: 50px;
}
[type=button] {
border: 0px;
border-radius: 6px;
cursor: pointer;
background-color: lightpink;
}
[value="已发货"] {
background-color: lightgreen;
}
[value="未发货"] {
background-color: lightblue;
}
#top {
display: flex;
justify-content: space-around;
width: 750px;
margin: 0 auto;
}
fieldset{
width: 800px;
margin: 0 auto;
}
[value="▽"]{
background-color: lightcoral;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="main"><br /><br />
<div id="top">
<input type="button" value="新增订单" ng-click="clickAdd()" />
<input type="button" value="批量删除" ng-click="delMore()" />
<input type="text" placeholder="按商品名称查询" ng-model="selectByGname" />
<input type="text" placeholder="按手机号查询" ng-model="selectByTel" />
<select ng-model="selectByStat">
<option value="">---请选择---</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
</div><br /><br />
<fieldset ng-show="isShowField">
<legend>添加订单信息</legend>
商品名:<input type="text" ng-model="aGname" id="aGname" /><br /><br /> 用户名:
<input type="text" ng-model="aUname" id="aUname" /><br /><br /> 手机号:
<input type="text" ng-model="aTel" id="aTel" /><br /><br /> 价格:
<input type="text" ng-model="aPrice" id="aPrice" /><br /><br /> 城市:
<select ng-model="province" id="province">
<option value="">---请选择省份---</option>
</select>
<select ng-model="aCity" id="city">
<option value="">---请选择城市---</option>
</select><br /><br />
<input type="button" value="保存" ng-click="add()" />
</fieldset><br /><br />
<table border="0" cellspacing="1" cellpadding="10px" ng-show="isShowTable">
<tr id="bt">
<th><input type="checkbox" ng-click="cb_all()" id="cb_all" /></th>
<th>id <input type="button" value="△" id="orderById" ng-click="orderById()" /></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格 <input type="button" value="△" id="orderByPrice" ng-click="orderByPrice()" /></th>
<th>城市</th>
<th>下单时间 <input type="button" value="△" id="orderByRegdate" ng-click="orderByRegdate()" /></th>
<th>状态</th>
</tr>
<tr ng-repeat="x in goods|filter:{gname:selectByGname,tel:selectByTel,state:selectByStat}|orderBy:orderby">
<td><input type="checkbox" class="cb" value="{{x.id}}" ng-click="cbb()" /></td>
<td>{{x.id}}</td>
<td>{{x.gname}}</td>
<td>{{x.uname}}</td>
<td>{{x.tel}}</td>
<td>{{x.price}}</td>
<td>{{x.city}}</td>
<td>{{x.regdate|date:"MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="{{x.state}}" ng-click="stateChange(x.id)" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
//http请求数据
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.then(function(response) {
$scope.goods = response.data;
});
//初始化talble_show值
$scope.isShowTable = true;
//初始化field_show值
$scope.isShowField = false;
//点击“新增订单”按钮
$scope.clickAdd = function(){
if ($scope.isShowField == false) {
$scope.isShowField = true;
}else {
$scope.isShowField = false;
}
}
//全选
$scope.cb_all = function(){
var cbs = $(".cb");
if ($("#cb_all").prop("checked")) {
cbs.each(function(){
cbs.prop("checked",true);
})
} else{
cbs.each(function(){
cbs.prop("checked",false);
})
}
}
//单选
$scope.cbb = function(){
var flag = true;
var cbs = $(".cb");
var cb_all = $("#cb_all");
for (var i = 0; i < cbs.length; i++) {
if (!cbs[i].checked) {
flag = false;
}
}
if (flag) {
cb_all.prop("checked",flag);
} else{
cb_all.prop("checked",flag);
}
}
//排序
var isOrder = true;
//根据id
$scope.orderById = function(){
if (isOrder) {
$scope.orderby = "id";
$("#orderById").val("▽");
isOrder = false;
} else{
$scope.orderby = "-id";
$("#orderById").val("△");
isOrder = true;
}
}
//根据价格
$scope.orderByPrice = function(){
if (isOrder) {
$scope.orderby = "price";
$("#orderByPrice").val("▽");
isOrder = false;
} else{
$scope.orderby = "-price";
$("#orderByPrice").val("△");
isOrder = true;
}
}
//根据下单时间
$scope.orderByRegdate = function(){
if (isOrder) {
$scope.orderby = "regdate";
$("#orderByRegdate").val("▽");
isOrder = false;
} else{
$scope.orderby = "-regdate";
$("#orderByRegdate").val("△");
isOrder = true;
}
}
//改变状态
$scope.stateChange = function(id){
for (var i = 0; i < $scope.goods.length; i++) {
if ($scope.goods[i].id == id) {
$scope.goods[i].state = "已发货";
break;
}
}
}
//批量删除
$scope.delMore = function(){
var cbs = $(".cb:checked");
if (cbs.length == 0) {
alert("请选中数据再删除!");
return;
}
if (!confirm("是否删除这些数据?")) {
return;
}
cbs.each(function(){
for (var i = 0; i < $scope.goods.length; i++) {
if ($scope.goods[i].id == $(this).val()) {
if ($scope.goods[i].state == "已发货") {
$scope.goods.splice(i,1);
break;
}
}
}
})
}
//加载省份下拉框选项
var datas = new Array();
datas["北京"] = ["海淀","大兴","朝阳"];
datas["河南"] = ["郑州"];
datas["上海"] = ["浦东","黄埔"];
for (province in datas) {
$("#province").append("<option>"+province+"</option>");
}
//下拉框改变加载市的下拉选项
$("#province").change(function(){
var province = $(this).val();
var citys = datas[province];
$("#city").empty();
$("#city").append("<option>---请选择城市---</option>");
for (var i = 0; i < citys.length; i++) {
$("#city").append("<option>"+citys[i]+"</option>");
}
})
//添加
$scope.add = function(){
var flag = true;
var gname = $scope.aGname;
if (gname==null || gname=="" || gname.length==0) {
$("#aGname").prop("placeholder","商品名不能为空!");
flag = false;
}else {
flag = true;
}
var uname = $scope.aUname;
if (uname==null || uname=="" || uname.length==0) {
$("#aUname").prop("placeholder","用户名不能为空!");
flag = false;
}else {
flag = true;
}
var tel = $scope.aTel;
if (tel==null || tel=="" || tel.length==0) {
$("#aTel").prop("placeholder","手机号不能为空!");
flag = false;
}else {
flag = true;
}
var price = $scope.aPrice;
if (price==null || price=="" || price.length==0) {
$("#aPrice").prop("placeholder","价格不能为空!");
flag = false;
}else {
flag = true;
}
var city = $scope.aCity;
var d = new Date();
var str = "";
str += contactTime(d.getMonth()+1) + "-" +contactTime(d.getMonth())+" "+contactTime(d.getHours())+":"+contactTime(d.getMinutes())+":"+contactTime(d.getSeconds());
var shop = {};
shop.id = $scope.goods[$scope.goods.length-1].id++;
shop.gname = gname;
shop.uname = uname;
shop.tel = tel;
shop.price = price;
shop.city = city;
shop.state = "未发货";
shop.regdate = str;
if (flag) {
$scope.goods.unshift(shop);
}else {
alert("信息不完善!");
}
}
})
function contactTime(dd){
if (dd<10) {
return "0" + dd;
}
return dd;
}
</script>
</body>
</html>
angularJs的综合
猜你喜欢
转载自blog.csdn.net/qq_42219543/article/details/80859492
今日推荐
周排行