angularJS 增删查排序_ng-model sort-CSDN博客

本文展示了一个使用AngularJS开发的商品库存管理系统实例。该系统具备添加、删除商品及按货物数量进行排序的功能，并通过过滤器实现了搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周三技能模拟题</title>
<script src="js/angular.min.js"></script>
<style>
table tr:nth-child(even){
background: #ccc;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("kongzhiqi",["$scope",function($scope){
$scope.users=[
{name:"云南白药", num:100, address:"云南", price:19.9, times:new Date('2017-11-20 09:32:21')},
{name:"999感冒灵",num:30, address:"北京", price:12.5, times:new Date('2017-11-20 09:32:21')},
{name:"感康", num:20, address:"河北", price:16.6, times:new Date('2017-11-20 09:32:21')}
];

//删除
$scope.del=function(obj){
alert("是否删除？");
if(true){
$scope.users.splice(obj,1);
alert("删除成功！");
}
}

//添加
$scope.add=function(){
var uname=$scope.uname;
var unum=$scope.unum;
var uaddress=$scope.uaddress;
var uprice=$scope.uprice;
var utimes=$scope.utimes=new Date();

$scope.users.push({name:uname,num:unum, address:uaddress, price:uprice,times:utimes});
}

//排序
$scope.fun=function(){
if($scope.sort=="货物数量倒序"){
$scope.px=false;
}else if($scope.sort=="货物数量正序"){
$scope.px=true;
}
}
}]);

</script>
</head>
<body ng-app="myapp" ng-controller="kongzhiqi">

<h3 style="margin-left:300px;">商品库存管理系统</h3>
搜索：<input ng-model="ssname">
排序：<select ng-model="sort" ng-change="fun()">
<option>货物数量正序</option>
<option>货物数量倒序</option>

</select>

<button ng-click="toadd=true" style="background: greenyellow;">入库</button>
<br>

<table border="1px soild" style="width: 600px;">
<tr style="background: gray;">
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物入库时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in users|filter:{name:ssname}| orderBy:or:px">
<td>{{u.name}}</td>
<td>{{u.num}}</td>
<td>{{u.address}}</td>
<td>{{u.price|currency:"￥ "}}</td>
<td>{{u.times|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button ng-click="del($index)">删除</button>
</td>
</tr>
</table>

<form ng-show="toadd">
货物名称：<input ng-model="uname"/><br>
货物数量：<input ng-model="unum"><br>
货物产地：<input ng-model="uaddress"><br>
货物单价：<input ng-model="uprice"><br>
货物入库时间：<input type="date" ng-model="utimes"><br>
<button ng-click="add()">保存</button>
</form>

</body>
</html>