<!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>
<style type="text/css">
select {
width: 160px;
height: 22px;
}
table{
width: 60%;
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycon">
<center>
<div id="div1">
查询:<input type="" name="" id="" value="" ng-model="cha" />
排序:
<select name="" ng-model="orderby_" >
<option value="">--选择排序--</option>
<option value="name">按照名称正序</option>
<option value="-name">按照名称倒叙</option>
<option value="jiaqian">按照价钱正序</option>
<option value="-jiaqian">按照价钱倒叙</option>
</select>
<input type="button" name="" id="" value="入库增加" ng-click="isShow=!isShow" />
<br />
<br />
<div id="div1_1" ng-show="isShow">
商品名称:<input type="" name="" id="" value="" ng-model="name_"/><span id="a1"></span><br />
商品价格:<input type="" name="" id="" value="" ng-model="jiaqian_"/><span id="a2"></span><br />
商品产地:<input type="" name="" id="" value="" ng-model="dizhi_"/><span id="a3"></span><br />
<br />
<input type="button" name="" id="" value="添加" ng-click="insert_()" />
</div>
<br />
<input type="button" name="" id="" value="批量删除" ng-click="delect_1()" />
</div>
<div id="div2">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="check_"/></th>
<th>序号</th>
<th>ID</th>
<th>商品名称</th>
<th>价钱</th>
<th>产地</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in addll|orderBy:orderby_|filter:cha">
<td><input type="checkbox" name="" id="" value="{{$index}}" ng-model="check_" /></td>
<td>{{$index}}</td>
<td>{{x.ID}}</td>
<td>{{x.name}}</td>
<td>{{x.jiaqian}}</td>
<td>{{x.dizhi}}</td>
<td>
<input type="button" name="" id="" value="删除" ng-click="delect_2(x.name)" />
<input type="button" name="" id="" value="修改" ng-click="update_2(x.name)" />
</td>
</tr>
</tbody>
</table>
<br />
<!--//点击修改显示修改页面-->
<div id="div3" ng-show="isShow1">
商品名称:<input type="text" name="" id="" value="" ng-model="name1" /><br />
商品价格:<input type="text" name="" id="" value="" ng-model="jiage1"/><br />
商品产地:<input type="text" name="" id="" value="" ng-model="chandi1"/><br />
<input type="button" name="" id="" value="提交修改" ng-click="tjxg_()" />
</div>
</div>
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("mycon", function($scope) {
//显示添加组件
$scope.isShow = false;
$scope.isShow1= false;
//定义添加空值
$scope.name_="";
$scope.jiaqian_="";
$scope.dizhi_="";
//定义修改信息的值
var bbb="";
$scope.name1="";
$scope.jiage1="";
$scope.chandi1="";
//获取数据集合
$scope.addll = [{
ID: 1,
name: "苹果",
jiaqian: 5999,
dizhi: "京东"
}, {
ID: 2,
name: "戴尔",
jiaqian: 6888,
dizhi: "淘宝"
}, {
ID: 3,
name: "耳机",
jiaqian: 388,
dizhi: "国贸"
}, {
ID: 4,
name: "电脑",
jiaqian: 9999,
dizhi: "阿里巴巴"
}];
//点击批量删除
$scope.delect_1=function(){
var deall=$("input:checked");//选中的删除
for (var i = deall.length-1; i >=0; i--) {
//得到序号--从0开始
var index=deall[i].value;
//进行删除
$scope.addll.splice(index,1);
}
}
//点击修改出现页面
$scope.update_2=function(index_){
$scope.isShow1= true;
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name==index_) {
bbb=$scope.addll[i];
break;
}
}
$scope.name1=bbb.name;
$scope.jiage1=bbb.jiaqian;
$scope.chandi1=bbb.dizhi;
}
//点击提交修改页面显示隐藏
$scope.tjxg_=function(){
$scope.isShow1= false;
bbb.name=$scope.name1;
bbb.jiaqian=$scope.jiage1;
bbb.dizhi=$scope.chandi1;
}
//点击保存添加数据
$scope.insert_=function(){
//判断商品为空
var name=$scope.name_;
if (name=="") {
$("#a1").html("商品不能为空");
} else{
$("#a1").html("");
}//判断价钱为空
var jiaqian=$scope.jiaqian_;
if (jiaqian=="") {
$("#a2").html("价钱不能为空");
} else{
$("#a2").html("");
}//判断地址为空
var dizhi=$scope.dizhi_;
if (dizhi=="") {
$("#a3").html("地址不能为空");
} else{
$("#a3").html("");
}
//点击保存添加数组
var aaa={};
aaa.name=$scope.name_;
aaa.jiaqian=$scope.jiaqian_;
aaa.dizhi=$scope.dizhi_;
$scope.addll.push(aaa);
}
//点击删除 删除一行数据
$scope.delect_2=function(gname_){
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name=gname_) {
$scope.addll.splice(i,1);
}
break;
}
}
})
</script>
</body>
</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>
<style type="text/css">
select {
width: 160px;
height: 22px;
}
table{
width: 60%;
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycon">
<center>
<div id="div1">
查询:<input type="" name="" id="" value="" ng-model="cha" />
排序:
<select name="" ng-model="orderby_" >
<option value="">--选择排序--</option>
<option value="name">按照名称正序</option>
<option value="-name">按照名称倒叙</option>
<option value="jiaqian">按照价钱正序</option>
<option value="-jiaqian">按照价钱倒叙</option>
</select>
<input type="button" name="" id="" value="入库增加" ng-click="isShow=!isShow" />
<br />
<br />
<div id="div1_1" ng-show="isShow">
商品名称:<input type="" name="" id="" value="" ng-model="name_"/><span id="a1"></span><br />
商品价格:<input type="" name="" id="" value="" ng-model="jiaqian_"/><span id="a2"></span><br />
商品产地:<input type="" name="" id="" value="" ng-model="dizhi_"/><span id="a3"></span><br />
<br />
<input type="button" name="" id="" value="添加" ng-click="insert_()" />
</div>
<br />
<input type="button" name="" id="" value="批量删除" ng-click="delect_1()" />
</div>
<div id="div2">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="check_"/></th>
<th>序号</th>
<th>ID</th>
<th>商品名称</th>
<th>价钱</th>
<th>产地</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in addll|orderBy:orderby_|filter:cha">
<td><input type="checkbox" name="" id="" value="{{$index}}" ng-model="check_" /></td>
<td>{{$index}}</td>
<td>{{x.ID}}</td>
<td>{{x.name}}</td>
<td>{{x.jiaqian}}</td>
<td>{{x.dizhi}}</td>
<td>
<input type="button" name="" id="" value="删除" ng-click="delect_2(x.name)" />
<input type="button" name="" id="" value="修改" ng-click="update_2(x.name)" />
</td>
</tr>
</tbody>
</table>
<br />
<!--//点击修改显示修改页面-->
<div id="div3" ng-show="isShow1">
商品名称:<input type="text" name="" id="" value="" ng-model="name1" /><br />
商品价格:<input type="text" name="" id="" value="" ng-model="jiage1"/><br />
商品产地:<input type="text" name="" id="" value="" ng-model="chandi1"/><br />
<input type="button" name="" id="" value="提交修改" ng-click="tjxg_()" />
</div>
</div>
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("mycon", function($scope) {
//显示添加组件
$scope.isShow = false;
$scope.isShow1= false;
//定义添加空值
$scope.name_="";
$scope.jiaqian_="";
$scope.dizhi_="";
//定义修改信息的值
var bbb="";
$scope.name1="";
$scope.jiage1="";
$scope.chandi1="";
//获取数据集合
$scope.addll = [{
ID: 1,
name: "苹果",
jiaqian: 5999,
dizhi: "京东"
}, {
ID: 2,
name: "戴尔",
jiaqian: 6888,
dizhi: "淘宝"
}, {
ID: 3,
name: "耳机",
jiaqian: 388,
dizhi: "国贸"
}, {
ID: 4,
name: "电脑",
jiaqian: 9999,
dizhi: "阿里巴巴"
}];
//点击批量删除
$scope.delect_1=function(){
var deall=$("input:checked");//选中的删除
for (var i = deall.length-1; i >=0; i--) {
//得到序号--从0开始
var index=deall[i].value;
//进行删除
$scope.addll.splice(index,1);
}
}
//点击修改出现页面
$scope.update_2=function(index_){
$scope.isShow1= true;
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name==index_) {
bbb=$scope.addll[i];
break;
}
}
$scope.name1=bbb.name;
$scope.jiage1=bbb.jiaqian;
$scope.chandi1=bbb.dizhi;
}
//点击提交修改页面显示隐藏
$scope.tjxg_=function(){
$scope.isShow1= false;
bbb.name=$scope.name1;
bbb.jiaqian=$scope.jiage1;
bbb.dizhi=$scope.chandi1;
}
//点击保存添加数据
$scope.insert_=function(){
//判断商品为空
var name=$scope.name_;
if (name=="") {
$("#a1").html("商品不能为空");
} else{
$("#a1").html("");
}//判断价钱为空
var jiaqian=$scope.jiaqian_;
if (jiaqian=="") {
$("#a2").html("价钱不能为空");
} else{
$("#a2").html("");
}//判断地址为空
var dizhi=$scope.dizhi_;
if (dizhi=="") {
$("#a3").html("地址不能为空");
} else{
$("#a3").html("");
}
//点击保存添加数组
var aaa={};
aaa.name=$scope.name_;
aaa.jiaqian=$scope.jiaqian_;
aaa.dizhi=$scope.dizhi_;
$scope.addll.push(aaa);
}
//点击删除 删除一行数据
$scope.delect_2=function(gname_){
for (var i = 0; i < $scope.addll.length; i++) {
if ($scope.addll[i].name=gname_) {
$scope.addll.splice(i,1);
}
break;
}
}
})
</script>
</body>
</html>