您的位置：首页 > Web前端 > AngularJS

html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序

2017-11-07 11:30 996 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angularjs/angular.js"></script>
<style>
.box{
width: 100%;
}
.box1{
width: 100%;
height: 50px;
background: lavender;
}
.clear:after{
content: "\200B";
display: block;
clear: both;
}
.btn{
background: orange;
color: white;
border: 0;
width: 80px;
height: 30px;
border-radius: 5px;
}
.liang{
background: crimson;
color: white;
border: 0;
width: 100px;
height: 30px;
line-height: 30px;
border-radius: 5px;
float: right;
margin: 10px;
}
#sou{
width: 200px;
height: 30px;
border-radius: 3px;
margin: 10px;
}
table{
margin-top: 15px;
width: 100%;
border-collapse: collapse;
text-align: center;
}
th{
border: 1px solid silver;
}
/*点击列表头信息，如：”商品名称”时该头信息名称变红色*/
th:active{color: red}
th:hover{color: red}
td{
border: 1px solid silver;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
/*声明数据对象，初始化商品信息，数据自拟且不低于四条*/
$scope.goods=[{
gname:"ipad",
num:"10",
price:"3400",
id:2,
state:false
},{
gname: "aphone",
num: "100",
price: "6400",
id:4,
state:false
},{
gname: "mypad",
num: "20",
price: "4400",
id:3,
state:false
},{
gname: "zpad",
num: "130",
price: "8400",
id:5,
state:false
},{
gname: "iphone X",
num: "199",
price: "1500",
id:1,
state:false
}
];
/*点击删除按钮时弹出提示框询问用户确定删除，用户点击确定删除后该条数据在页面被删除。*/
$scope.remove=function (index) {
if(confirm('确定移除此项嘛？')){
$scope.goods.splice(index,1);
}
};
/*用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息*/
$scope.pi=function () {
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].state==true){
$scope.goods.splice(i,1);
i--;
}
}
}
/*且该列数据进行正（倒）序排列，再单击序号则该列信息数据进行倒（正）序排列。*/
$scope.toggleSort = function(){
$scope.<span style="color:#660e7a"><strong>sortIsAsc </strong></span>= !$scope.sortIsAsc;
$scope.goods.sort(function(a, b){
if($scope.sortIsAsc){
if (a.id < b.id) {
return -1;
}
if (a.id === b.id) {
return 0;
}
return 1;
}
if (a.id > b.id) {
return -1;
}
if (a.id === b.id) {
return 0;
}
return 1;
});
};
/*点击第一个checkbox,所有的复选框被选中*/
$scope.allCheck=false;
$scope.all= function () {
for(var i=0;i<$scope.goods.length;i++){
if($scope.allCheck===true){
$scope.goods[i].state=true;
}else {
$scope.goods[i].state=false;
}
}
};
//每个复选框
$scope.itemCheck = function () {
var flag = 0;
for(var i = 0; i<$scope.goods.length; i++){
if($scope.goods[i].state == true){
flag ++;
}
}
if(flag == $scope.goods.length){
$scope.allCheck = true;
}else{
$scope.allCheck = false;
}
};
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="box">
<h1>商品库存信息管理</h1>
<hr>
</div>
<div class="box1">
<input type="text" placeholder="输入关键字..." id="sou" ng-model="query"/><button ng-click="pi()" class="liang">批量删除</button>
</div>
<table>
<tr>
<th><input type="checkbox" ng-model="allCheck" ng-click="all()"/></th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品库存</th>
<th ng-click="toggleSort()">序号</th>
<th>数据操作</th>
</tr>
<!--用ng-repaet指令将对象遍历并渲染到页面中-->
<!--Filter实现模糊查询的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息-->
<tr ng-repeat="arr in goods | filter:query">
<td><input type="checkbox" ng-model="arr.state" ng-click="itemCheck()"/></td>
<td>{{$index+1}}</td>
<td>{{arr.gname}}</td>
<!--商品价格这一列需要在价格前面加上”￥：”。-->
<td>{{arr.price|currency:"￥："}}</td>
<td>{{arr.num}}</td>
<td>{{arr.id}}</td>
<td><button ng-click="remove($index)" class="btn">删除</button></td>
</tr>
</table>

</body>
</html>

[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs css html
相关文章推荐
新的分享
章节导航