<!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("zyapp",[]);
app.controller("demoa",function($scope){
//修改定义值为false
$scope.f = false;
//创建数组,添加数据
$scope.goods = [{ck:false,gnum:'2',gname:'感冒颗粒',uname:'张三',tel:'15369548622',gprice:'695',city:'上海',gtime:'2017-5-18 18:36',state:'未发货'},
{ck:false,gnum:'7',gname:'止咳糖浆',uname:'李四',tel:'15324352622',gprice:'456',city:'北京',gtime:'2017-4-18 18:26',state:'已发货'},
{ck:false,gnum:'3',gname:'排毒养颜胶囊',uname:'王五',tel:'15369548622',gprice:'155',city:'上海',gtime:'2017-5-18 16:36',state:'已发货'},
{ck:false,gnum:'1',gname:'感康',uname:'赵六',tel:'15369548622',gprice:'755',city:'广州',gtime:'2017-6-18 10:06',state:'已发货'},
{ck:false,gnum:'5',gname:'眼药水 ',uname:'田七',tel:'15369548622',gprice:'235',city:'上海',gtime:'2017-9-18 12:36',state:'未发货'},
{ck:false,gnum:'6',gname:'阿莫西林',uname:'王八',tel:'15369548622',gprice:'525',city:'广州',gtime:'2017-7-18 18:56',state:'未发货'},
{ck:false,gnum:'4',gname:'藿香水',uname:'姜超',tel:'15369548622',gprice:'250',city:'上海',gtime:'2017-1-18 16:46',state:'已发货'},
{ck:false,gnum:'9',gname:'阿司匹林',uname:'谭维维',tel:'15369548622',gprice:'305',city:'北京',gtime:'2017-4-18 12:46',state:'未发货'},
{ck:false,gnum:'8',gname:'酒精棉',uname:'李小璐',tel:'15369548622',gprice:'563',city:'上海',gtime:'2017-3-18 18:32',state:'已发货'},
];
//全选和反选
$scope.ckAll=function(){
//循环遍历
for(var i=0;i<$scope.goods.length;i++){
//创建关系
$scope.goods[i].ck=$scope.flag;
}
}
//批量发货
$scope.selAll = function(){
//循环
for(var i=0;i<$scope.goods.length;i++){
//判断
if($scope.goods[i].ck){
//创建关系
$scope.goods[i].state='已发货';
}else{
alert("请选择");
}
}
}
//批量删除
$scope.delAll=function(){
var count = 0;
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].ck){
count++;
$scope.goods.splice(i,1);
i--;
}
}
}
//删除
$scope.del = function(i){
$scope.goods.splice(i,1);
}
//获取新增的用户
$scope.add=function(){
//设置添加表格隐藏
$scope.tabshow=false;
//获取输入框的值
var v_ID = $scope.gnum;
var v_gname=$scope.gname;
var v_uname = $scope.uname;
var v_tel = $scope.tel;
var v_city = $scope.city;
var v_state = $scope.state;
var v_price = $scope.gprice;
var v_time=$scope.gtime;
//添加判断
if(v_ID==""){
alert("id不能为空")
}if(v_time==""){
alert("时间不能为空")
}if(v_state==""){
alert("状态不能为空")
}if(isNaN(v_ID)!=false){
alert("id必须是数字")
}if(v_gname==""){
alert("商品名不能为空")
}if(v_uname==""){
alert("用户名不能为空")
}if(v_tel==""){
alert("电话不能为空")
}if(isNaN(v_tel)!=false){
alert("手机号必须是数字")
}if(v_city==""){
alert("城市不能为空")
}if(v_price==""){
alert("价格不能为空")
}else{
//添加到数组
$scope.goods.push({
gnum:v_ID,
gname:v_gname,
uname:v_uname,
tel:v_tel,
gprice:v_price,
gtime:v_time,
city:v_city,
state:v_state
}
);
}
}
});
</script>
</head>
<body ng-app="zyapp" ng-controller="demoa">
<input type="text" placeholder="商品名查询" ng-model="vgname"/>
<input type="text" placeholder="用户名查询" ng-model="vuname"/>
<select ng-model="vcity">
<option value="">选择城市</option>
<option >北京</option>
<option>上海</option>
<option>广州</option>
</select>
<select ng-model="vstate">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select>
<option>开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="px">
<option value="">ID排序</option>
<option value="-gprice">价格从高到低</option>
<option value="+gprice">价格从低到高</option>
<option value="-gnum">ID从高到低</option>
<option value="+gnum">ID从低到高</option>
</select><br /><br />
<button ng-click="tabshow=true">新增用户</button>
<button ng-click="selAll()">批量发货</button>
<button ng-click="delAll()">批量删除</button>
<span>敏感字:米(商品名)-->替换成*</span><br /><br />
<table style="text-align: center;" width="800px" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td> <input type="checkbox" ng-click="ckAll()" ng-model="flag"/> </td>
<td>ID</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格</td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods|filter:{gname:vgname,uname:vuname,city:vcity,state:vstate}|orderBy:px">
<td> <input type="checkbox" ng-model="g.ck"/> </td>
<td>{{g.gnum}}</td>
<td>{{g.gname}}</td>
<td>{{g.uname}}</td>
<td>
<span ng-hide="f">{{g.tel}}</span>
<span ng-show="f">
<input type="text" ng-model="g.tel"/>
</span>
</td>
<td>{{g.gprice}}</td>
<td>{{g.city}}</td>
<td>{{g.gtime}}</td>
<td>
<!--判断是否为发货-->
<span style="color: red;" ng-if="g.state=='未发货'">
<a style="color: red;" href="#" ng-click="g.state='已发货'">{{g.state}}</a>
</span>
<span style="color: green; " ng-if="g.state=='已发货'">
已发货
</span>
</td>
<td> <a href="#" ng-click="f=!f">修改</a> <a href="#" ng-click="del($index)">删除</a></td>
</tr>
</table>
<table ng-show="tabshow">
<tr>
<td>ID:</td>
<td><input type="text" ng-model="gnum"/></td>
</tr>
<tr>
<td>商品名:</td>
<td><input type="text" ng-model="gname"/></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" ng-model="uname"/></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" ng-model="tel"/></td>
</tr>
<tr>
<td>价格:</td>
<td><input type="text" ng-model="gprice"/></td>
</tr>
<tr>
<td>城市:</td>
<td><input type="text" ng-model="city"/></td>
</tr>
<tr>
<td>下单时间:</td>
<td><input type="text" ng-model="gtime"/></td>
</tr>
<tr>
<td>状态:</td>
<td><input type="text" ng-model="state"/></td>
</tr>
<tr>
<td>
<button ng-click="add()">保存</button>
<button ng-click="tabshow=false">取消</button>
</td>
</tr>
</table>
</body>
</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("zyapp",[]);
app.controller("demoa",function($scope){
//修改定义值为false
$scope.f = false;
//创建数组,添加数据
$scope.goods = [{ck:false,gnum:'2',gname:'感冒颗粒',uname:'张三',tel:'15369548622',gprice:'695',city:'上海',gtime:'2017-5-18 18:36',state:'未发货'},
{ck:false,gnum:'7',gname:'止咳糖浆',uname:'李四',tel:'15324352622',gprice:'456',city:'北京',gtime:'2017-4-18 18:26',state:'已发货'},
{ck:false,gnum:'3',gname:'排毒养颜胶囊',uname:'王五',tel:'15369548622',gprice:'155',city:'上海',gtime:'2017-5-18 16:36',state:'已发货'},
{ck:false,gnum:'1',gname:'感康',uname:'赵六',tel:'15369548622',gprice:'755',city:'广州',gtime:'2017-6-18 10:06',state:'已发货'},
{ck:false,gnum:'5',gname:'眼药水 ',uname:'田七',tel:'15369548622',gprice:'235',city:'上海',gtime:'2017-9-18 12:36',state:'未发货'},
{ck:false,gnum:'6',gname:'阿莫西林',uname:'王八',tel:'15369548622',gprice:'525',city:'广州',gtime:'2017-7-18 18:56',state:'未发货'},
{ck:false,gnum:'4',gname:'藿香水',uname:'姜超',tel:'15369548622',gprice:'250',city:'上海',gtime:'2017-1-18 16:46',state:'已发货'},
{ck:false,gnum:'9',gname:'阿司匹林',uname:'谭维维',tel:'15369548622',gprice:'305',city:'北京',gtime:'2017-4-18 12:46',state:'未发货'},
{ck:false,gnum:'8',gname:'酒精棉',uname:'李小璐',tel:'15369548622',gprice:'563',city:'上海',gtime:'2017-3-18 18:32',state:'已发货'},
];
//全选和反选
$scope.ckAll=function(){
//循环遍历
for(var i=0;i<$scope.goods.length;i++){
//创建关系
$scope.goods[i].ck=$scope.flag;
}
}
//批量发货
$scope.selAll = function(){
//循环
for(var i=0;i<$scope.goods.length;i++){
//判断
if($scope.goods[i].ck){
//创建关系
$scope.goods[i].state='已发货';
}else{
alert("请选择");
}
}
}
//批量删除
$scope.delAll=function(){
var count = 0;
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].ck){
count++;
$scope.goods.splice(i,1);
i--;
}
}
}
//删除
$scope.del = function(i){
$scope.goods.splice(i,1);
}
//获取新增的用户
$scope.add=function(){
//设置添加表格隐藏
$scope.tabshow=false;
//获取输入框的值
var v_ID = $scope.gnum;
var v_gname=$scope.gname;
var v_uname = $scope.uname;
var v_tel = $scope.tel;
var v_city = $scope.city;
var v_state = $scope.state;
var v_price = $scope.gprice;
var v_time=$scope.gtime;
//添加判断
if(v_ID==""){
alert("id不能为空")
}if(v_time==""){
alert("时间不能为空")
}if(v_state==""){
alert("状态不能为空")
}if(isNaN(v_ID)!=false){
alert("id必须是数字")
}if(v_gname==""){
alert("商品名不能为空")
}if(v_uname==""){
alert("用户名不能为空")
}if(v_tel==""){
alert("电话不能为空")
}if(isNaN(v_tel)!=false){
alert("手机号必须是数字")
}if(v_city==""){
alert("城市不能为空")
}if(v_price==""){
alert("价格不能为空")
}else{
//添加到数组
$scope.goods.push({
gnum:v_ID,
gname:v_gname,
uname:v_uname,
tel:v_tel,
gprice:v_price,
gtime:v_time,
city:v_city,
state:v_state
}
);
}
}
});
</script>
</head>
<body ng-app="zyapp" ng-controller="demoa">
<input type="text" placeholder="商品名查询" ng-model="vgname"/>
<input type="text" placeholder="用户名查询" ng-model="vuname"/>
<select ng-model="vcity">
<option value="">选择城市</option>
<option >北京</option>
<option>上海</option>
<option>广州</option>
</select>
<select ng-model="vstate">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select>
<option>开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="px">
<option value="">ID排序</option>
<option value="-gprice">价格从高到低</option>
<option value="+gprice">价格从低到高</option>
<option value="-gnum">ID从高到低</option>
<option value="+gnum">ID从低到高</option>
</select><br /><br />
<button ng-click="tabshow=true">新增用户</button>
<button ng-click="selAll()">批量发货</button>
<button ng-click="delAll()">批量删除</button>
<span>敏感字:米(商品名)-->替换成*</span><br /><br />
<table style="text-align: center;" width="800px" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td> <input type="checkbox" ng-click="ckAll()" ng-model="flag"/> </td>
<td>ID</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格</td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods|filter:{gname:vgname,uname:vuname,city:vcity,state:vstate}|orderBy:px">
<td> <input type="checkbox" ng-model="g.ck"/> </td>
<td>{{g.gnum}}</td>
<td>{{g.gname}}</td>
<td>{{g.uname}}</td>
<td>
<span ng-hide="f">{{g.tel}}</span>
<span ng-show="f">
<input type="text" ng-model="g.tel"/>
</span>
</td>
<td>{{g.gprice}}</td>
<td>{{g.city}}</td>
<td>{{g.gtime}}</td>
<td>
<!--判断是否为发货-->
<span style="color: red;" ng-if="g.state=='未发货'">
<a style="color: red;" href="#" ng-click="g.state='已发货'">{{g.state}}</a>
</span>
<span style="color: green; " ng-if="g.state=='已发货'">
已发货
</span>
</td>
<td> <a href="#" ng-click="f=!f">修改</a> <a href="#" ng-click="del($index)">删除</a></td>
</tr>
</table>
<table ng-show="tabshow">
<tr>
<td>ID:</td>
<td><input type="text" ng-model="gnum"/></td>
</tr>
<tr>
<td>商品名:</td>
<td><input type="text" ng-model="gname"/></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" ng-model="uname"/></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" ng-model="tel"/></td>
</tr>
<tr>
<td>价格:</td>
<td><input type="text" ng-model="gprice"/></td>
</tr>
<tr>
<td>城市:</td>
<td><input type="text" ng-model="city"/></td>
</tr>
<tr>
<td>下单时间:</td>
<td><input type="text" ng-model="gtime"/></td>
</tr>
<tr>
<td>状态:</td>
<td><input type="text" ng-model="state"/></td>
</tr>
<tr>
<td>
<button ng-click="add()">保存</button>
<button ng-click="tabshow=false">取消</button>
</td>
</tr>
</table>
</body>
</html>