Angular添加删除查找排序日期等

来源：互联网发布：淘宝助理5.4官方下载编辑：程序博客网时间：2024/05/29 17:04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 800px;
font-size: 20px;
}
table tr:nth-child(1){
background:#999999 ;
}
table tr:nth-child(2n){
background: #EEEEEE;
}
</style>
<script src="../js/angular.min.js"></script>
<script src="../js/jquery-1.11.1.js"></script>
<script>
var myapp=angular.module("dxtapp",[]);
myapp.controller("demo1",["$scope",function($scope){
$scope.or="number";
$scope.toadd=false;
$scope.goods=[

{name:"云南白药",number:100,address:"云南",price:19.9,riqi:new Date("2017-11-17 10:50:43")},
{name:"999感冒药",number:30,address:"北京",price:12.5,riqi:new Date("2017-12-12 10:50:43")},
{name:"感康",number:20,address:"河北",price:16.6,riqi:new Date("2017-12-16 10:50:43")},
];

//添加
$scope.add=function(){
var uname=$scope.uname;
var unumber=$scope.unumber;
var uaddress=$scope.uaddress;
var uprice=$scope.uprice;
var uriqi=$scope.uriqi;
$scope.toadd=false;
$scope.goods.push({name:uname,number:unumber,address:uaddress,price:uprice,riqi:uriqi});
//再次点击添加时清空输入框的内容
$scope.uname="";
$scope.unumber="";
$scope.uaddress="";
$scope.uprice="";
$scope.uriqi="";
};
//删除
$scope.del=function(obj){
var a=confirm("确定要删除吗");
if(a==true){
$scope.goods.splice(obj,1);
}
};
}])
</script>
</head>
<body ng-app="dxtapp" ng-controller="demo1">
<center>
<h2>商品库存管理系统</h2>
<input type="text" ng-model="sel" placeholder="输入关键字搜索..." style="float: left;margin-left: 350px; border-radius: 10px;"/>
<span>
<select ng-model="or">
<option value="">请选择排序方式</option>
<option value="number">按货物数量正序排列</option>
<option value="-number">按货物数量倒序排列</option>
<option value="riqi">按货物入库时间正序排列</option>
<option value="-riqi">按货物入库时间倒序排列</option>
</select>
</span>
<button ng-click="toadd=true" style="background: #99FF00; border-radius: 5px; width: 60px; margin-left: 25px;">入库</button><br /><br />
<table border="1" cellspacing="0">
<tr>
<td style="width: 100px;height: 30px;">货物名称</td>
<td style="width: 100px;height: 30px;">货物数量</td>
<td style="width: 100px;height: 30px;">货物产品</td>
<td style="width: 100px;height: 30px;">货物单价</td>
<td style="width: 300px;height: 30px;">货物入库日期</td>
<td style="width: 100px;height: 30px;">操作</td>
</tr>
<tr ng-repeat="g in goods|filter:{name:sel}|orderBy:or">
<td>{{g.name}}</td>
<td>{{g.number}}</td>
<td>{{g.address}}</td>
<td>{{g.price|currency:"￥："}}</td>
<td>{{g.riqi|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
<form ng-show="toadd" style="margin-top: 30px; border: 1px solid black; width: 500px;height: 200px;">
货物名称:<input type="text" ng-model="uname" style="margin-top: 10px;"/><br />
货物数量:<input type="text" ng-model="unumber" style="margin-top: 10px;"/><br />
货物产地:<input type="text" ng-model="uaddress" style="margin-top: 10px;"/><br />
货物单价:<input type="text" ng-model="uprice" style="margin-top: 10px;"/><br />
货物入库日期:<input type="date" ng-model="uriqi" style="margin-top: 10px;"/><br />
<button ng-click="add()" style="margin-top: 10px;">保存</button>
</form>
</center>
</body>
</html>

阅读全文

0 0