网页布局:
<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> {{sj}}</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 ng-click="f=true">
<span ng-hide="f">{{d.gname}}</span>
<input ng-show="f" ng-model="d.gname" ng-blur="f=false"/>
</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: yellow;" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a>
</span>
<span style="background: blueviolet;" ng-show="d.state=='已发货'" >已发货</span>
</td>
</tr>
</table>
添加,城市:
<form ng-show="isshow">
{{erros}}<br/>
id:<input ng-model="id" /> {{erros.e_id}} <br />
gname:<input ng-model="gname" />{{erros.e_gname}}<br />
uname:<input ng-model="uname" /><br />
tel:<input ng-model="tel" /><br />
price:<input ng-model="price" type="number" /><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>
</form>
城市选择
<script>
var ds=[{"pro":'北京',citys:['海淀','朝阳','昌平']},
{"pro":'上海',citys:['浦东','浦西']},
{"pro":'河南',citys:['郑州','安阳','濮阳']}
];
function getcity(){
var p=$("#p").val();
var cs=[];
//根据省 获取对应的城市
for(var i=0;i<ds.length;i++){
if(p==ds[i].pro){
cs=ds[i].citys;
}
}
//先删除
$("#city option").remove();
//循环cs,添加option到select中
for(var i=0;i<cs.length;i++){
var op=$("<option>"+cs[i]+"</option>")
//把optoin添加到select
$("#city").append(op);
}
}
</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.save=function(){$scope.erros=null;
if($scope.id==undefined||$scope.id==""){
if($scope.erros==null){
$scope.erros={};
}
$scope.erros.e_id="id不能为空";
}
if($scope.gname==undefined||$scope.gname==""){
if($scope.erros==null){
$scope.erros={};
}
$scope.erros.e_gname="商品名不能为空";
}
//是否输入都正确
if($scope.erros==null){
$scope.datas.push(
{"id":$scope.id,"gname":$scope.gname,"uname":$scope.uname,
"tel":$scope.tel,"price":$scope.price,
"provice":$scope.pro,"city":$scope.city,
"regdate":new Date(),"state":"未发货"});
$scope.isshow=false;
}
}
布局样式
<style>
tr:nth-child(2n){
background: darkgrey;
}
tr:nth-child(2n+1){
background: pink;
}
.myborder{
border: 1px solid red;
}
</style>