使用AngularJS实现网页页面上的增、删、查
首先，导入AngularJS第三方jar包，在这里，我使用的是第三方jar包，还可以使用网络上获取的jar包
<script type="text/javascript" src="libs/angular.min.js" ></script> <script type="text/javascript" src="libs/angular-route.min.js" ></script>下面是一些angularjs逻辑操作代码
<script>
var app = angular.module("MyApp",[]);
app.controller("Mycon",function($scope){
//获取系统当前时间
var aa = new Date();
//初始化数据,json格式数据（自定义数据）
$scope.goods = [
{
"names":"云南白药",
"numbers":"100",
"louders":"云南",
"prices":"19.9",
"datas":aa
},
{
"names":"999感冒灵",
"numbers":"30",
"louders":"北京",
"prices":"12.5",
"datas":aa
},
{
"names":"感康",
"numbers":"20",
"louders":"河北",
"prices":"16.9",
"datas":aa
},
{
"names":"办案跟",
"numbers":"120",
"louders":"河北",
"prices":"16.9",
"datas":aa
}
];
//入库的按钮点击事件
$scope.rk = function(){
//sos等于true的目的是，点击入库按钮，使下方的新增数据展示出来，它默认是不展示的
$scope.sos = true;
}
//把初始化的数据赋值给goodis，是为了下面点击保存时，只需保存一个对象
$scope.goodis = $scope.goods;
//点击保存的点击事件
$scope.bc = function(){
//sos等于false的目的是点击保存按钮，使下方的新增数据再隐藏起来
$scope.sos = false;
//把从输入框中获取到的值重新给数据赋值
$scope.goodis ={
"names":$scope.n,
"numbers":$scope.num,
"louders":$scope.loud,
"prices":$scope.p,
"datas":aa
};
//点击把新增的数据通过push()方法增加到table表格中
$scope.goods.push($scope.goodis);
}
//点击删除的点击事件
$scope.remove = function(index){
$scope.goods.splice(index,1);
if($scope.goods.length==0){
alert("库存为空");
}
}
//点击查询的点击事件
$scope.cx = function(){
$scope.zz = [];
var txt = $scope.txt;
if(txt==""||txt==null){
alert("您输入的为空");
}else{
for(var i = 0 ; i < $scope.goods.length;i++){
names = $scope.goods[i].names;
if(names.indexOf(txt)!=-1){
$scope.zz.push($scope.goods[i]);
$scope.goods = $scope.zz;
}else{
if(i==1){
alert("您输入的物品好像不存在哎！");
}
}
}
}
}
//这是下拉框的改变事件，原理是冒泡排序
$scope.cc = function(){
if($scope.op=="--排序--"){
}else if($scope.op=="按数量正序"){
$scope.goods.sort(function(a,b){
return a.numbers - b.numbers;
});
}else{
$scope.goods.sort(function(a,b){
return b.numbers - a.numbers;
});
}
}
});
</script>
下面是html中的布局代码
<body ng-controller="Mycon">
<h1>商品库存管理系统</h1><br />
<input type="text" placeholder="请输入关键词" ng-model="txt" />
<input type="button" value="查询" ng-click="cx()" />
<select ng-change="cc()" ng-model="op">
<option>--排序--</option>
<option>按数量倒序</option>
<option>按数量正序</option>
</select>
<input id="rkbut" type="button" value="入库" ng-click="rk()" /><br /><br />
<table class="tab" border="1" cellpadding="0" cellspacing="0" width="500px">
<tr style="background-color: darkcyan;">
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物的生产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.names}}</td>
<td>{{good.numbers}}</td>
<td>{{good.louders}}</td>
<td>{{good.prices | currency:'￥'}}</td>
<td>{{good.datas | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td><input type="button" value="删除" ng-click="remove($index)"/></td>
</tr>
</table>
<br />
<fieldset style="border: 1px solid darkgreen; width: 500px;" ng-show="sos">
<legend>新增球员</legend>
<table border="0">
<tr>
<td>货物名称</td>
<td><input type="text" ng-model="n" /></td>
</tr>
<tr>
<td>货物数量</td>
<td><input type="text" ng-model="num" /></td>
</tr>
<tr>
<td>货物产地</td>
<td><input type="text" ng-model="loud" /></td>
</tr>
<tr>
<td>货物单价</td>
<td><input type="text" ng-model="p" /></td>
</tr>
<tr>
<td><input type="button" value="保存" ng-click="bc()"/></td>
</tr>
</table>
</fieldset>
</body>