angular增删查排

<!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-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
}
</style>
<script type="text/javascript">
var app = angular.module("myapp", []).controller("myctrl", function($scope) {
//1.初始化下拉选项的数据
$scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序", "按照货品单价正序", "按照货品单价倒序"];
//2.定义状态值--隐藏
$scope.flag = false;
//3.定义表格内部数据
$scope.goods = [{
"name": "云南白药",
"num": 100,
"produce": "云南",
"price": "19.9",
"date1": "1371120093221"
}, {
"name": "999感冒灵",
"num": 30,
"produce": "北京",
"price": "12.5",
"date1": "1371399948599"
}, {
"name": "感康",
"num": 20,
"produce": "河北",
"price": "16.6",
"date1": "1371394846499"
}];
//点击提交按钮,,,获取输入的内容
$scope.save = function() {
//清空输入框的数据
$(".ipt").val("");
//获取输入的内容
var name = $scope.name;
var num = $scope.num;
var produce = $scope.produce;
var price = $scope.price;
//alert(name+"-"+num+"-"+produce+"-"+price);
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDay();
var h = date.getHours();
var mm = date.getMinutes();
var s = date.getSeconds();
var date1 = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
//添加到表格数据中
$scope.goods.push({
name: name,
num: num,
produce: produce,
price: price,
date1: date1
})
//隐藏表单
$scope.flag = false;
}
//删除
$scope.del = function(position) {
$scope.goods.splice(position, 1);
}
//排序
$scope.change = function() {
//获取到下拉选项的内容
var value = $scope.selectName;
//alert(value);
//可以根据这个内容进行判断
switch(value) {
case "按照库存数量正序":
$scope.goods.sort(function(a, b) {
return a.num - b.num;
});
break;
case "按照库存数量倒序":
$scope.goods.sort(function(a, b) {
return b.num - a.num;
});
break;
case "按照货品单价正序":
$scope.goods.sort(function(a, b) {
return a.price - b.price;
});
break;
case "按照货品单价倒序":
$scope.goods.sort(function(a, b) {
return b.price - a.price;
});
break;
default:
break;
}
}
})
</script>
</head>

<body ng-app="myapp" ng-controller="myctrl">
<h2>商品入库管理</h2>
<div class="tab">
<input type="text" placeholder="请输入关键字" ng-model="selectValue" />
<select ng-model="selectName" ng-init="selectName=order[0]" ng-options="s for s in order" ng-change="change()">{{s}}</select>
<button ng-click="flag=true">入库</button>
</div>
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<td>名称</td>
<td>数量</td>
<td>产地</td>
<td>价格</td>
<td>入库时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods|filter:selectValue">
<td>{{s.name}}</td>
<td>{{s.num}}</td>
<td>{{s.produce}}</td>
<td>{{s.price|currency:"¥"}}</td>
<td>{{s.date1|date:"yyyy-MM-dd hh-mm-ss"}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
<form ng-show="flag">
名称:<input type="text" ng-model="name" class="ipt" /><br /> 数量:
<input type="text" ng-model="num" class="ipt" /><br /> 产地:
<input type="text" ng-model="produce" class="ipt" /><br /> 价格:
<input type="text" ng-model="price" class="ipt" /><br /> 入库时间:
<input type="text" ng-model="date" class="ipt" /><br />
<button ng-click="save()">提交</button>
</form>
</body>

</html>

猜你喜欢