删除 全选 反选 排序 id show
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<style type="text/css">
body {
text-align: center;
}
button {
margin-top: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入姓名" ng-model="search" />
<select>
<option>价格正序</option>
<option>价格倒序</option>
</select><br />
<button ng-click="add()" style="background: green;color: white;">新增订单</button>
<button ng-click="piliang()" style="background: green;color: white;">批量删除</button>
<button ng-click="fan()" style="background: green;color: white;">反选</button>
<table class="table-striped table-hover" border="1" cellspacing="1" cellpadding="1" width="600px" style="margin-left: 450px;margin-top: 30px;">
<tr style="background: #999999;">
<td><input type="checkbox" ng-click="checkAll()" /></td>
<td>ID<button ng-click="pai('id')" style="background: green;">排序</button></td>
<td>用户名</td>
<td>商品名</td>
<td>手机号</td>
<td>价格<button ng-click="pai('price')" style="background: green;">排序</button></td>
<td>城市</td>
</tr>
<tbody>
<tr ng-repeat="p in goods|orderBy:(sortFlag+sortName)|filter:search2">
<td><input type="checkbox" ng-click="check()" class="mycb" /></td>
<td>{{p.id}}</td>
<td>{{p.uname}}</td>
<td>{{p.gname}}</td>
<td>{{p.tel}}</td>
<td>{{p.price|currency:'￥'}}</td>
<td>{{p.city}}</td>
</tr>
</tbody>
</table>
<div>新增订单</div>
<table ng-show="show" style="margin: auto">
<tr>
<td>商品名</td>
<td><input type="text" placeholder="6-20个字符" ng-model="gname" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="4-16个字符" ng-model="uname" /></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="6-20个字符" ng-model="tel" /></td>
</tr>
<tr>
<td>城市</td>
<td><select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
<option>深圳</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<ul>
<li ng-show="flag1">商品名不能为空！</li>
<li ng-show="flag2">商品名必须是6-20个字符！</li>
<li ng-show="flag3">用户名不能为空！</li>
<li ng-show="flag4">用户名必须是4-16个字符！</li>
<li ng-show="flag5">手机号不能为空！</li>
<li ng-show="flag6">手机号格式不正确！</li>
<li ng-show="flag7">请选择城市！</li>
</ul>
<button ng-click="push()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">提交</button>
</td>
</tr>
</table>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//添加数据
$scope.goods = [{
id: 1,
gname: "IPhone5S",
uname: "果果",
tel: 13112332100,
price: 4999,
city: "北京",
}, {
id: 2,
gname: "小米6",
uname: "米粉",
tel: 15222991111,
price: 2999,
city: "深圳",
}, {
id: 3,
gname: "华为P9",
uname: "华仔",
tel: 13678953456,
price: 3999,
city: "上海",
}, {
id: 4,
gname: "OPPO R11",
uname: "欧弟",
tel: 18631090582,
price: 4998,
city: "天津",
}, {
id: 5,
gname: "VIVO",
uname: "朵唯",
tel: 15810266912,
price: 2998,
city: "重庆",
}];
//排序
$scope.sortFlag = "-"; //正序标识符
$scope.sortName = "name"; //根据商品名称倒序排序
$scope.pai = function(columnName) {
$scope.sortName = columnName;
if ($scope.sortFlag == "-") {
$scope.sortFlag = "";
} else {
$scope.sortFlag = "-";
}
};
//查询
$scope.search = "";
$scope.search2 = "";
$scope.$watch("search", function(value) {
if (value.indexOf("枪") != -1) {
alert("有敏感词");
$scope.search = "";
} else {
$scope.search2 = $scope.search;
}
});
//全选
var flag = false;
$scope.checkAll = function() {
var xz = $("input[type=checkbox]");
if (flag == false) {
for (var i = 0; i < xz.length; i++) {
var cb = xz[i];
cb.checked = true;
}
flag = true;
} else {
for (var i = 0; i < xz.length; i++) {
var cb = xz[i];
cb.checked = false;
}
flag = false;
}
}
//反选
$scope.fan = function() {
var xz = $("input[type=checkbox]");
for (var i = 1; i < xz.length; i++) {
var cb = xz[i];
cb.checked = !cb.checked;
}
}
//批量删除
$scope.piliang = function() {
flag = false;
var arr = new Array();
var xz = $("input[type=checkbox][class=mycb]:checked");
for (var i = 1; i < xz.length; i++) {
var cb = xz[i];
if (cb.checked == true) {
flag = true;
arr.push(cb);
}
}
if (flag == false) {
alert("请至少选中一个");
} else {
var b = confirm("确定要删除吗");
if (b == true) {
for (var i = 0; i < xz.length; i++) {
var cb = xz[i];
var tr = cb.parentNode.parentNode;
tr.remove();
}
}
}
}
//添加数据
$scope.add = function() {
$scope.show = true;
$scope.flag1 = false; //标志位
$scope.flag2 = false; //标志位
$scope.flag3 = false; //标志位
$scope.flag4 = false; //标志位
$scope.flag5 = false; //标志位
$scope.flag6 = false; //标志位
$scope.flag7 = false; //标志位
$scope.push = function() {
if ($scope.gname == "" || $scope.gname == null) {
$scope.flag1 = true;
} else {
if ($scope.gname.length < 6 || $scope.gname.length > 20) {
$scope.flag2 = true;
}
}
//判断用户名
if ($scope.uname == "" || $scope.uname == null) {
$scope.flag3 = true;
} else {
if ($scope.uname.length < 4 || $scope.uname.length > 16) {
$scope.flag4 = true;
}
}
//手机号
//判断用户名
if ($scope.tel == "" || $scope.tel == null) {
$scope.flag5 = true;
} else {
if ($scope.tel.length != 11) {
$scope.flag6 = true;
}
}
//提交
if ($scope.city == "选择城市") {
$scope.flag7 = true;
} else {
$scope.flag7 = false;
}
if ($scope.flag1 != true && $scope.flag2 != true && $scope.flag3 != true && $scope.flag4 != true && $scope.flag5 != true && $scope.flag6 != true && $scope.flag7 != true) {
//全显示，格式全不正确，才能进来
//遍历数据源，拿到商品id
var goodsID = 0;
for (index in $scope.goods) {
if ($scope.goods[index].id > goodsID) {
goodsID = $scope.goods[index].id;
}
}
alert("添加成功！");
var newGood = {
id: goodsID + 1,
gname: $scope.gname,
uname: $scope.uname,
tel: $scope.tel,
price: 3668.00,
city: $scope.city,
};
//添加新数据
$scope.goods.push(newGood);
} else {
//提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色
$("ul").addClass("li");
}
}
}
});
</script>
</body>
</html>