<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
/* */
var app= angular.module("app",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(aa){
$scope.datas= aa;
})
//批量删除
$scope.delAll=function(){
var f=0;
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].f && $scope.datas[i].state=='未发货'){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.gb=function(){
//全选
for(var i=0;i<$scope.datas.length;i++){
$scope.datas[i].f=$scope.ck;
//
}
}
//点击查询按钮开始查询
$scope.sel=function(){
$scope.sname1=$scope.sname;
$scope.stel1=$scope.stel;
$scope.ss1=$scope.ss;
}
//添加
$scope.save=function(){
//存放所有的错误信息
$scope.errors=null;
if($scope.id==undefined || $scope.id==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.e_id="id不能为空";
}
if($scope.gname==undefined || $scope.gname==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.e_gname="gname不能为空";
}
if($scope.errors==null){
$scope.datas.push({id:$scope.id,gname:$scope.gname,
uname:$scope.uname,
tel:$scope.tel,
price:$scope.price,
city:$scope.city,provice:$scope.pro,
regdate:new Date(),
state:'未发货'
});
$scope.isshow=false;
}
}
})
</script>
<!-- 样式: -->
<style>
tr:nth-child(2n){
background: darkgrey;
}
tr:nth-child(2n+1){
background: blue;
}
.myborder{
border: 1px solid red;
}
</style>
</head>
<!--使用 ng-controller 会自动创建空的$scope -->
<body ng-app="app" ng-controller="ctrl">
{{datas}}<br />
<input ng-model="sname" placeholder="请输入商品名"/>
<input ng-model="stel" placeholder="请输入手机号"/>
<select ng-model="ss" ><!--ng-init="ss='已发货'" 给ss赋值 -->
<option value="">请选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="sel()">搜索</button>
<button ng-click="delAll()">批量删除</button>
<button ng-click="isshow=true">新增订单</button>
<table border="1px">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="gb()" />
</td>
<td>id <button ng-click="px='id';sj=!sj">排序</button></td>
<td>商品名字</td>
<td>用户名</td>
<td>手机号</td>
<td>价格 <button ng-click="px='price';sj=!sj">排序</button> </td>
<td>地址</td>
<td>下单时间</td>
<td>状态</td>
</tr>
<tr ng-repeat="d in datas|filter:{gname:sname,tel:stel,state:ss}|orderBy:px:sj">
<td><input type="checkbox" ng-model="d.f" /> </td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>{{d.price|currency:"￥"}}</td>
<td>{{d.provice}}-{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: green" ng-show="d.state=='已发货'">
已发货
</span>
<span style="background: yellow" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a>
</span>
</td>
</tr>
</table>
<!-- -->
<form ng-show="isshow">
id:<input ng-model="id" />{{errors.e_id}} <br />
gname:<input ng-model="gname" />{{errors.e_gname}}<br />
uname:<input ng-model="uname" /><br />
tel:<input ng-model="tel" /><br />
price:<input ng-model="price" /><br />
省:<select id="p" ng-model="pro" οnchange="getcity()" > <!--ng-modle 双向绑定 视图改变对应的变量pro -->
<option value="">请选择省份</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select>
<br/>
城市:
<select id="city" ng-model="city" > <!--ng-modle 双向绑定 视图改变对应的变量pro -->
<option value="">请选择城市</option>
</select>
<br/>
<button ng-click="save()">保存</button>
{{errors}}
</form>
</body>
<!--jquery -->
<script>
var citys=[{pro:"北京",cs:["海淀","昌平","朝阳"]},
{pro:"河南",cs:["安阳","郑州","洛阳"]},
{pro:"上海",cs:["浦东","浦西","长春"]}];
function getcity(){
var p=$("#p").val(); /*使用id选择器 */
var cts=[];
//数组变量
for(var i=0;i<citys.length;i++){
if(p==citys[i].pro){
cts=citys[i].cs;
}
}
//添加之前,先清空之前的option
$("#city option").remove();
//cts中的值 变成多个option
for(var i=0;i<cts.length;i++){
var op=$("<option>"+cts[i]+"</option>");
//把op添加到select
$("#city").append(op);
}
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
/* */
var app= angular.module("app",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(aa){
$scope.datas= aa;
})
//批量删除
$scope.delAll=function(){
var f=0;
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].f && $scope.datas[i].state=='未发货'){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.gb=function(){
//全选
for(var i=0;i<$scope.datas.length;i++){
$scope.datas[i].f=$scope.ck;
//
}
}
//点击查询按钮开始查询
$scope.sel=function(){
$scope.sname1=$scope.sname;
$scope.stel1=$scope.stel;
$scope.ss1=$scope.ss;
}
//添加
$scope.save=function(){
//存放所有的错误信息
$scope.errors=null;
if($scope.id==undefined || $scope.id==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.e_id="id不能为空";
}
if($scope.gname==undefined || $scope.gname==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.e_gname="gname不能为空";
}
if($scope.errors==null){
$scope.datas.push({id:$scope.id,gname:$scope.gname,
uname:$scope.uname,
tel:$scope.tel,
price:$scope.price,
city:$scope.city,provice:$scope.pro,
regdate:new Date(),
state:'未发货'
});
$scope.isshow=false;
}
}
})
</script>
<!-- 样式: -->
<style>
tr:nth-child(2n){
background: darkgrey;
}
tr:nth-child(2n+1){
background: blue;
}
.myborder{
border: 1px solid red;
}
</style>
</head>
<!--使用 ng-controller 会自动创建空的$scope -->
<body ng-app="app" ng-controller="ctrl">
{{datas}}<br />
<input ng-model="sname" placeholder="请输入商品名"/>
<input ng-model="stel" placeholder="请输入手机号"/>
<select ng-model="ss" ><!--ng-init="ss='已发货'" 给ss赋值 -->
<option value="">请选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="sel()">搜索</button>
<button ng-click="delAll()">批量删除</button>
<button ng-click="isshow=true">新增订单</button>
<table border="1px">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="gb()" />
</td>
<td>id <button ng-click="px='id';sj=!sj">排序</button></td>
<td>商品名字</td>
<td>用户名</td>
<td>手机号</td>
<td>价格 <button ng-click="px='price';sj=!sj">排序</button> </td>
<td>地址</td>
<td>下单时间</td>
<td>状态</td>
</tr>
<tr ng-repeat="d in datas|filter:{gname:sname,tel:stel,state:ss}|orderBy:px:sj">
<td><input type="checkbox" ng-model="d.f" /> </td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>{{d.price|currency:"￥"}}</td>
<td>{{d.provice}}-{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: green" ng-show="d.state=='已发货'">
已发货
</span>
<span style="background: yellow" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a>
</span>
</td>
</tr>
</table>
<!-- -->
<form ng-show="isshow">
id:<input ng-model="id" />{{errors.e_id}} <br />
gname:<input ng-model="gname" />{{errors.e_gname}}<br />
uname:<input ng-model="uname" /><br />
tel:<input ng-model="tel" /><br />
price:<input ng-model="price" /><br />
省:<select id="p" ng-model="pro" οnchange="getcity()" > <!--ng-modle 双向绑定 视图改变对应的变量pro -->
<option value="">请选择省份</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select>
<br/>
城市:
<select id="city" ng-model="city" > <!--ng-modle 双向绑定 视图改变对应的变量pro -->
<option value="">请选择城市</option>
</select>
<br/>
<button ng-click="save()">保存</button>
{{errors}}
</form>
</body>
<!--jquery -->
<script>
var citys=[{pro:"北京",cs:["海淀","昌平","朝阳"]},
{pro:"河南",cs:["安阳","郑州","洛阳"]},
{pro:"上海",cs:["浦东","浦西","长春"]}];
function getcity(){
var p=$("#p").val(); /*使用id选择器 */
var cts=[];
//数组变量
for(var i=0;i<citys.length;i++){
if(p==citys[i].pro){
cts=citys[i].cs;
}
}
//添加之前,先清空之前的option
$("#city option").remove();
//cts中的值 变成多个option
for(var i=0;i<cts.length;i++){
var op=$("<option>"+cts[i]+"</option>");
//把op添加到select
$("#city").append(op);
}
}
</script>
</html>
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
