<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.moves = "",
//网络请求数据
$http({
method:"get",
url:"phones.json"
}).then(function success(response){
$scope.moves = response.data;//获得网络请求的数据
debugger;
},function error(response){
debugger;
}).finally();
//查询过滤的条件
$scope.searchKey = "";
//排序条件
$scope.orderKey = "";
//显示添加区域的标记
$scope.showAdd = false;
//添加信息字段的绑定属性
$scope.mname = "";
$scope.mprice = "";
$scope.mtime = "";
$scope.city = "";
$scope.pno = "";
//添加函数
$scope.addMove = function(){
//获得新数据，创建电影对象
var _move = {};
_move.name = $scope.mname;
_move.price = $scope.mprice;
_move.time = $scope.mtime;
_move.city = $scope.city;
_move.pno = $scope.pno;
//添加到数据源中
$scope.moves.push(_move);
//关闭添加区域
$scope.showAdd = false;
};
//删除函数
$scope.deleteOne = function(dname){
//for循环遍历数据源
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var cmove = $scope.moves[i];
if(cmove.name == dname){
$scope.moves.splice(i,1);
break;
}
}
};
//批量删除
$scope.deleteMore = function(){
//获得所有要删除的电影的复选框
var cks = $("input[type=checkbox]:checked");
//遍历汇集所有要删除的电影的名字,,,收集要删除的电影的名字
var cknames = "";
for(var i=0;i<cks.length;i++){
var ckname = cks[i].value;
cknames = cknames + ckname+",";
}
//for循环遍历数据源，，保存不删除的电影
var lastMoves = [];//用来存放不删除的电影的容器
for(var i=0;i<$scope.moves.length;i++){
var a = $scope.moves[i];//得到一个电影
if(cknames.indexOf(a.name) == -1){//这个电影的名字不在删除的范围之内,,保存
lastMoves.push(a);
}
}
//重新设置数据源
$scope.moves = lastMoves;
};
$scope.sname = "";
$scope.sprice = "";
$scope.stime = "";
$scope.showUpdate = false;
//修改----回显功能
$scope.showMove = "";//引用要修改的电影对象
$scope.showOne = function(sname){
$scope.showUpdate = true;
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var smove = $scope.moves[i];
if(smove.name == sname){//找到要修改的电影信息
$scope.showMove = smove;
break;//找到后，跳出循环
}
}
//显示修改信息
$scope.sname = $scope.showMove.name;
$scope.sprice = $scope.showMove.price;
$scope.stime = $scope.showMove.time;
}
//最终修改
$scope.updateMove = function(){
$scope.showMove.name = $scope.sname;
$scope.showMove.price = $scope.sprice;
$scope.showMove.time = $scope.stime;
$scope.showUpdate = false;
}
});
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" 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>
<input type="button" value="入库" ng-click="showAdd=true"/>
<input type="button" value="批量删除" ng-click="deleteMore();"/>
</div>
<br />
<div ng-show="showAdd">
商品名称：<input type="text" ng-model="mname"/><br />
价格：<input type="text" ng-model="mprice"/><br />
产地：<input type="text" ng-model="city"/><br />
类型：<input type="text" ng-model="pno"/><br />
手机号：<input type="text" ng-model="mtime"/><br />
<input type="button" value="添加" ng-click="addMove();"/>
</div>
<br />
<table border="1px" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
<th>产地</th>
<th>类型</th>
<th>手机号</th>
<th>操作</th>
</tr>
<tr ng-repeat="m in moves |filter:searchKey |orderBy:orderKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{m.name}}" ng-model="checkAll"/></td>
<td>{{$index}}</td>
<td>{{m.name}}</td>
<td>{{m.price}}</td>
<td>{{m.city}}</td>
<td>{{m.pno[0]}}{{m.pno[1]}}</td>
<td>{{m.time}}</td>
<td><input type="button" value="删除" ng-click="deleteOne(m.name);"/>
<input type="button" value="修改" ng-click="showOne(m.name);"/>
</td>
</tr>
</table>
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="sname"/><br />
价格：<input type="text" ng-model="sprice"/><br />
手机号：<input type="text" ng-model="stime"/><br />
<input type="button" value="修改" ng-click="updateMove();"/>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.moves = "",
//网络请求数据
$http({
method:"get",
url:"phones.json"
}).then(function success(response){
$scope.moves = response.data;//获得网络请求的数据
debugger;
},function error(response){
debugger;
}).finally();
//查询过滤的条件
$scope.searchKey = "";
//排序条件
$scope.orderKey = "";
//显示添加区域的标记
$scope.showAdd = false;
//添加信息字段的绑定属性
$scope.mname = "";
$scope.mprice = "";
$scope.mtime = "";
$scope.city = "";
$scope.pno = "";
//添加函数
$scope.addMove = function(){
//获得新数据，创建电影对象
var _move = {};
_move.name = $scope.mname;
_move.price = $scope.mprice;
_move.time = $scope.mtime;
_move.city = $scope.city;
_move.pno = $scope.pno;
//添加到数据源中
$scope.moves.push(_move);
//关闭添加区域
$scope.showAdd = false;
};
//删除函数
$scope.deleteOne = function(dname){
//for循环遍历数据源
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var cmove = $scope.moves[i];
if(cmove.name == dname){
$scope.moves.splice(i,1);
break;
}
}
};
//批量删除
$scope.deleteMore = function(){
//获得所有要删除的电影的复选框
var cks = $("input[type=checkbox]:checked");
//遍历汇集所有要删除的电影的名字,,,收集要删除的电影的名字
var cknames = "";
for(var i=0;i<cks.length;i++){
var ckname = cks[i].value;
cknames = cknames + ckname+",";
}
//for循环遍历数据源，，保存不删除的电影
var lastMoves = [];//用来存放不删除的电影的容器
for(var i=0;i<$scope.moves.length;i++){
var a = $scope.moves[i];//得到一个电影
if(cknames.indexOf(a.name) == -1){//这个电影的名字不在删除的范围之内,,保存
lastMoves.push(a);
}
}
//重新设置数据源
$scope.moves = lastMoves;
};
$scope.sname = "";
$scope.sprice = "";
$scope.stime = "";
$scope.showUpdate = false;
//修改----回显功能
$scope.showMove = "";//引用要修改的电影对象
$scope.showOne = function(sname){
$scope.showUpdate = true;
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var smove = $scope.moves[i];
if(smove.name == sname){//找到要修改的电影信息
$scope.showMove = smove;
break;//找到后，跳出循环
}
}
//显示修改信息
$scope.sname = $scope.showMove.name;
$scope.sprice = $scope.showMove.price;
$scope.stime = $scope.showMove.time;
}
//最终修改
$scope.updateMove = function(){
$scope.showMove.name = $scope.sname;
$scope.showMove.price = $scope.sprice;
$scope.showMove.time = $scope.stime;
$scope.showUpdate = false;
}
});
</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" 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>
<input type="button" value="入库" ng-click="showAdd=true"/>
<input type="button" value="批量删除" ng-click="deleteMore();"/>
</div>
<br />
<div ng-show="showAdd">
商品名称：<input type="text" ng-model="mname"/><br />
价格：<input type="text" ng-model="mprice"/><br />
产地：<input type="text" ng-model="city"/><br />
类型：<input type="text" ng-model="pno"/><br />
手机号：<input type="text" ng-model="mtime"/><br />
<input type="button" value="添加" ng-click="addMove();"/>
</div>
<br />
<table border="1px" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序号</th>
<th>商品名称</th>
<th>价格</th>
<th>产地</th>
<th>类型</th>
<th>手机号</th>
<th>操作</th>
</tr>
<tr ng-repeat="m in moves |filter:searchKey |orderBy:orderKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{m.name}}" ng-model="checkAll"/></td>
<td>{{$index}}</td>
<td>{{m.name}}</td>
<td>{{m.price}}</td>
<td>{{m.city}}</td>
<td>{{m.pno[0]}}{{m.pno[1]}}</td>
<td>{{m.time}}</td>
<td><input type="button" value="删除" ng-click="deleteOne(m.name);"/>
<input type="button" value="修改" ng-click="showOne(m.name);"/>
</td>
</tr>
</table>
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="sname"/><br />
价格：<input type="text" ng-model="sprice"/><br />
手机号：<input type="text" ng-model="stime"/><br />
<input type="button" value="修改" ng-click="updateMove();"/>
</div>
</center>
</body>
</html>