angular删除添加排序

来源：互联网发布：淘宝开店需要交保证金吗编辑：程序博客网时间：2024/06/04 20:50

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="输入关键字搜索" ng-model="search" />
<select ng-model="sort" ng-change="fun()">
<option>--请选择--</option>
<option>票数倒序</option>
<option>票数正序</option>
</select>
<button ng-click="add()">入库</button><br>
<table border="1" cellspacing="1" cellpadding="1" class="table-striped>
<tr style="background: #666666;">
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物名单价</td>
<td>货物入库日期</td>
<td>操作</td>
</tr>
<tbody>
<tr ng-repeat="p in goods|orderBy:'dj':revers|filter:search2">
<td>{{p.name}}</td>
<td>{{p.sl}}</td>
<td>{{p.cd}}</td>
<td>{{p.dj}}</td>
<td>{{p.rq}}</td>
<td><button ng-click="remove($index)" class="btn">删除</button></td>
</tr>

</tbody>
</table>
<table border="1" cellspacing="1" cellpadding="1" ng-show="show">

<tr>
<td>货物名称</td>
<td><input type="text" ng-model="name" /></td>
</tr>
<tr>
<td>货物数量</td>
<td><input type="text" ng-model="sl" /></td>
</tr>
<tr>
<td>货物产地</td>
<td><input type="text" ng-model="cd" /></td>
</tr>
<tr>
<td>货物名单价</td>
<td><input type="text" ng-model="dj" /></td>
</tr>
<tr>
<td>货物入库日期</td>
<td><input type="text" ng-model="rq" /></td>
</tr>
<tr>
<td colspan="2"><button ng-click="push()">添加</button></td>
</tr>
</table>

<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {

//添加
$scope.goods = [{
name: "云南白药",
sl: "100",
cd: "云南",
dj: "￥：19.9",
rq: "2017-11-20 09:32:33"
}, {
name: "999感冒灵",
sl: "20",
cd: "山海",
dj: "￥：26.9",
rq: "2017-11-20 09:32:33"
}, {
name: "感康",
sl: "30",
cd: "山东",
dj: "￥：19.9",
rq: "2017-11-20 09:32:33"
}];

$scope.remove = function(index){
if(confirm("确定删除此项吗?")){
$scope.goods.splice(index,1);
}
}
//查询

$scope.search="";
$scope.search2="";
$scope.$watch("search",function(value){

if(value.indexOf("疆")!=-1){
$scope.search="";
}else{
$scope.search2=$scope.search;
}

});

$scope.sort="--请选择--";
//$scope.revers=null;
$scope.fun=function(){
if($scope.sort!="--请选择--"){
if($scope.sort=="票数倒序"){
$scope.revers=true;
}else if($scope.sort=="票数正序"){
$scope.revers=false;
}
}
};

$scope.show = false;
$scope.add = function() {
$scope.show = true;
};
$scope.push = function() {
for (var i = 0; i < $scope.goods.length; i++) {
if ($scope.name == $scope.goods[i].name) {
alert("重复");
return;
}
}
$scope.goods.push({
name: $scope.name,
sl: $scope.sl,
cd: $scope.cd,
dj: $scope.dj,
rq: $scope.rq
});
};

});
</script>
</body>

</html>

阅读全文

0 0

angular删除 添加 排序

angular删除添加排序