web 网页布局 过滤器

网页布局：

    <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>