<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>混合开发</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("data.json").then(function(response){
$scope.goods = response.data;
})
$scope.pros = [{
pro : "北京",
children : ["西二旗","西城","东城"]
},{
pro : "河南",
children : ["郑州","洛阳","驻马店"]
}]
$scope.searchKey = "";
$scope.citys = $scope.pros[0].children;
$scope.changcitys = function(pro){
$scope.citys = pro.children;
}
if ($scope.status != 0) {
$scope.status = "已发货";
} else {
$scope.status = "发货";
}
$scope.add = function(){
var stus = {};
if ($scope.name == null || $scope.name == "") {
$scope.sp_name = true;
return;
}else {
$scope.sp_name = false;
}
if ($scope.price < 0 || $scope.price == null) {
$scope.sp_price = true;
return;
}else{
$scope.sp_price = false;
}
if ($scope.number < 0 || $scope.number == null) {
$scope.sp_num = true;
return;
}else{
$scope.sp_num = false;
}
if ($scope.username == null || $scope.username == "") {
$scope.sp_vip = true;
return;
}else {
$scope.sp_vip = false;
}
var i = 0;
$scope.date=new Date().toLocaleTimeString();
time = new Date("2018-04-04 "+(i+1));
stus.address = $scope.s1.pro + $scope.s2
stus.name = $scope.name;
stus.price = $scope.price;
stus.number = $scope.number;
stus.username = $scope.username;
stus.status = 0;
stus.orderTime = new Date;
$scope.goods.push(stus);
$scope.showAdd = false;
}
$scope.All = function(){
for (var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].ck = $scope.check;
}
}
$scope.b_del = function(){
for (var i = 0; i < $scope.goods.length; i++) {
if ($scope.goods[i].ck) {
$scope.goods.splice(i,1);
i--;
}
}
}
});
</script>
<style>
span{
color: red;
}
td{
width: 100px;
height: 50px;
text-align: center;
}
.white{
background-color: white;
}
.gray{
background-color: ghostwhite;
}
.query{
position: absolute;
left: 100px;
}
.btn{
position: absolute;
right: 200px;
}
.btn2{
position: absolute;
right: 100px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="按商品名称搜索" ng-model="searchKey" class="query"/>
<input type="button" value="添加商品" ng-click="showAdd = !showAdd" style="background-color: greenyellow;" class="btn"/>
<input type="button" value="批量删除订单" ng-click="b_del()" style="background-color: red;" class="btn2"/><br />
<div ng-show="showAdd">
<fieldset>
<legend>添加商品</legend>
<center>
商品名称：<input type="text" ng-model="name" /><span ng-show="sp_name">*非空</span><br />
商品价格：<input type="number" ng-model="price" /><span ng-show="sp_price">*必须为数字且不能小于0</span><br />
商品数量：<input type="number" ng-model="number" /><span ng-show="sp_num">*必须为数字且不能小于0</span><br />
会员名称：<input type="text" ng-model="username" /><span ng-show="sp_vip">*非空</span><br />
收货地址：<select ng-init="s1=pros[0]" ng-model="s1" ng-options="s.pro for s in pros" ng-change="changcitys(s1)">
<option>---请选择省份---</option>
</select>
— <select ng-init="s2=citys[0]" ng-model="s2" ng-options="c for c in citys">
<option>---请选择市区---</option>
</select>
<input type="button" value="确认添加" ng-click="add()" />
</center>
</fieldset>
</div><br />
<center>
<table border="1px" cellpadding="0" cellspacing="0">
<tr style="background-color: gainsboro;">
<td><input type="checkbox" ng-model="check" ng-click="All()"</td>
<td>商品名称</td>
<td>商品价格</td>
<td>购买数量</td>
<td>商品总计</td>
<td>下单时间</td>
<td>商品状态</td>
<td>商品会员</td>
<td>收货地址</td>
<td>修改状态</td>
</tr>
<tr ng-repeat=" s in goods | filter : searchKey" class="{{$index%2? 'white':'gray'}}">
<td><input type="checkbox" ng-model="s.ck" /></td>
<td>{{s.name}}</td>
<td>￥：{{s.price}}</td>
<td>{{s.number}}</td>
<td>￥：{{s.count = s.price * s.number}}</td>
<td>{{s.orderTime | date : "yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{s.status}}</td>
<td>{{s.username}}</td>
<td>{{s.address}}</td>
<td><button ng-click="fahuo">发货</button>
</td>
</tr>
</table>
</center>
</body>
</html>
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
