核心提示：二级联动，增删改查，时间，顺序排序（全面型）代码实例!DOCTYPE htmlhtml headmeta charset=UTF-8title/titlescript type=text/ src=l...
二级联动，增删改查，时间，顺序排序（全面型）代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//定义二级联动数据
$scope.types = [{
fei: "厨房用具",
zai: ["做菜必备", "清洗工具", "刀具"]
}, {
fei: "生活用品",
zai: ["卫生工具", "洗漱用品", "黑科技"]
}, {
fei: "食品",
zai: ["散装", "膨化食品", "饼干"]
}, {
fei: "饮品",
zai: ["碳酸性饮料", "果汁饮料", "红酒", "白酒", "啤酒"]
}];
$scope.cargo = $scope.types[0].zai;
$scope.changcargo = function(fei) {
$scope.cargo = fei.zai
}
//模拟数据
$scope.goods = [{
name: "一品鲜酱油",
price: 25,
num: 50,
fenlie: "厨房用具做菜必备",
ccdate: new Date("2018-04-04")
}, {
name: "江小白",
price: 28,
num: 30,
fenlie: "饮品白酒",
ccdate: new Date("2018-04-05")
}, {
name: "乐事薯片",
price: 4,
num: 10,
fenlie: "食品膨化食品",
ccdate: new Date("2018-03-18")
}];
$scope.searchKey = "";
//添加
$scope.add = function() {
var stus = {};
if($scope.name == "" || $scope.name == null) {//商品名称校验
$scope.showName = true;
return;
} else {
stus.name = $scope.name;
$scope.showName = false;
}
if($scope.price == null) {//价格校验
$scope.showPrice = true;
return;
} else {
stus.price = $scope.price,
$scope.showPrice = false;
}
if($scope.num == null) {//数量校验
$scope.showNum = true;
return;
} else {
stus.num = $scope.num,
$scope.showNum = false;
}
if ($scope.ccdate == null) {
$scope.showDate = true;
return;
}else{
stus.ccdate = $scope.ccdate;
$scope.ccdate = false;
}
stus.fenlie = $scope.g1.fei + $scope.g2;
$scope.goods.push(stus);
//添加隐藏
$scope.showAdd = false;
}
//批量删除
$scope.batch_del = function() {
for(var i = 0; i < $scope.types.length; i++) {
if($scope.goods[i].ck) {
$scope.goods.splice(i, 1);
i--;
}
}
}
//全/反选
$scope.xuan = function() {
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].ck = !$scope.goods[i].ck;
}
}
//点击复选框，实现全选
$scope.All = function() {
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].ck = $scope.check;
}
}
//删除
$scope.del = function(i) {
$scope.goods.splice(i, 1);
}
//商品价格总计
$scope.getTotalPrice = function() {
var toa = 0;
for(var i = 0; i < $scope.goods.length; i++) {
toa += ($scope.goods[i].price * $scope.goods[i].num)
}
return toa;
}
//修改
var upstu = "";
//点击修改按钮判断
$scope.update = function(gname){
for (var i = 0; i < $scope.goods.length; i++) {
if ($scope.goods[i].name == gname) {
$scope.showUpdate = true;//显示要修改的信息
upstu = $scope.goods[i];
break;
}
}
//回显
$scope.upname = upstu.name;
$scope.upprice = upstu.price;
$scope.upnum = upstu.num;
$scope.upfenlie = upstu.fenlie;
$scope.upccdate = upstu.ccdate;
}
//修改之后，修改信息消失
$scope.tjUpdate = function(){
upstu.name = $scope.upname;
upstu.price = $scope.upprice;
upstu.num = $scope.upnum;
upstu.fenlie = $scope.upfenlie;
upstu.ccdate = $scope.upccdate;
$scope.showUpdate = false;
}
});
</script>
<style>
span {
color: red;
}
td {
width: 100px;
height: 50px;
text-align: center;
}
.blue {
background-color: deepskyblue;
}
.purple {
background-color: mediumpurple;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button style="background-color: paleturquoise;" ng-click="showAdd = !showAdd">添加</button>
<button style="background-color: lightpink;" ng-click="batch_del()">批量删除</button>
<p ng-show="showAdd">
商品名称：<input type="text" ng-model="name" placeholder="请输入商品名称" /><span ng-show="showName">商品名称不可空</span><br /> 商品价格：
<input type="number" ng-model="price" placeholder="请输入商品名称价格" /><span ng-show="showPrice">价格不可空</span><br /> 商品数量：
<input type="number" ng-model="num" placeholder="请输入商品名称数量" /><span ng-show="showNum">数量不可空</span><br /> 商品类型：
<select ng-init="g1=types[0]" ng-model="g1" ng-options="t.fei for t in types" ng-change="changcargo(g1)">
<option value="">---请选择---</option>
</select><br /> 小分类：
<select ng-init="g2=cargo[0]" ng-model="g2" ng-options="c for c in cargo">
<option value="">---请选择---</option>
</select><br />
出产日期：<input type="date" ng-model="ccdate" /><span ng-show="showDate">请输入出产日期</span><br />
<button ng-click="add()">确认添加</button>
</p>
<button ng-click="xuan()" style="background: #F0FFF0;">全选/反选</button> 查询：
<input type="text" placeholder="请输入关键字查询" ng-model="searchKey" /> 排序：
<select ng-model="orderKey">
<option value="">---请选择---</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<table border="1px" >
<tr style="background-color: #F0FFF0;">
<td><input type="checkbox" ng-click="All()" ng-model="check" /></td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品类别</td>
<td>商品小计</td>
<td>出产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat=" g in goods | filter : searchKey | orderBy : orderKey" class="{{$index%2? 'blue':'purple'}}">
<td><input type="checkbox" ng-model="g.ck" /></td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.num}}</td>
<td>{{g.fenlie}}</td>
<td>{{g.count = g.price * g.num}}</td>
<td>{{g.ccdate | date :"yyyy-MM-dd"}}</td>
<td>
<button ng-click="del($index)">删除</button>
<button ng-click="update(g.name)">修改</button>
</td>
</tr>
<h3>商品总价是：{{getTotalPrice()}}</h3>
</table>
<p ng-show="showUpdate">
商品名称：<input type="text" ng-model="upname" /><br />
商品价格：<input type="number" ng-model="upprice" /><br />
商品数量：<input type="number" ng-model="upnum" /><br />
商品类型：<input type="text" ng-model="upfenlie" /><br />
出产日期：<input type="date" ng-model="upccdate" /><br />
<input type="button" value="提交修改" ng-click="tjUpdate()"/>
</p><br />
</center>
</body>
</html>
