angular做的一个表单带删除排序，搜索等功能

最新推荐文章于 2023-03-15 21:28:51 发布
最新推荐文章于 2023-03-15 21:28:51 发布
阅读量968 收藏
点赞数 1
分类专栏： 前端开发遇见的问题以及解决方案 文章标签： angular 表单搜索 排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36947128/article/details/72822161
版权

在学习angular的时候做的一个小DOM，有问题可以指点一下谢谢。

<!DOCTYPE html>
<html>


<head lang="en">
<meta charset="UTF-8">
<title>链接管理</title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.min.js"></script>


<style>
input {
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.headCtl {
padding: 5px 15px;
overflow: hidden;
line-height: 24px;
border-top: solid 1px #ddd;
}

.icon-reorder:hover {
cursor: pointer;
}

.btnCtl {
display: inline-block;
float: right;
}
</style>
</head>


<body ng-app="my" ng-controller="cot">
<form>
<div class="panel admin-panel">
<div class="panel-head headCtl">
<strong class="icon-reorder on"> 链接管理A区</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)" ng-click="addTo()"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" ng-click="allmove()"><span class="icon-trash-o"></span> 批量删除</a>
</div>


</div>
<div class="panel admin-panel">
<div class="padding border-bottom">
<ul class="search">
<li style="float: right;">
<button type="button" class="button border-green" id="checkall"><span class="icon-check"></span> 导出</button>
</li>
<li>
<span>搜索：</span><input type="text" class="inputLight" ng-model="serch" style="height: 33px;" />
</li>
</ul>
</div>
<table class="table table-hover text-center">
<tr>
<th>选中状态</th>
<th>序号</th>
<th>标题</th>
<th>网址</th>
<th>统计时间</th>
<th>操作状态
</tr>
<tr ng-repeat="x in task">
<td ng-checked="all"><input type="checkbox"></td>
<td>{{ $index }}</td>
<td><input type="text" value="{{x.title}}" autocomplete="off"></td>
<td><input type="text" value="{{x.url}}" autocomplete="off"></td>
<td>{{x.time}}</td>
<td>
<button type="button" class=" button border-blue" ng-click="update($index)">编辑</button>
<button type="button" class=" button border-blue" ng-click="abb($index)">删除</button>
</td>
</tr>
<tr>
<td colspan="8">
<div class="pagelist">
<a href="">上一页</a> <span class="current">1</span>
<a href="">2</a>
<a href="">3</a>
<a href="">下一页</a>
<a href="">尾页</a>
</div>
</td>
</tr>
</table>


</div>


<div class="modal" id="modal-1">


<div class="modal-dialog">


<div class="modal-content">


<div class="modal-header">
<button class="close" data-dismiss="modal" ng-click="upHide()">
                         
                        </button>
<h3 class="modal-title">修改</h3>
</div>


<div class="modal-body">
<div>标题</div>
<input ng-model="popr.title" value="{{popr.title}}" id="text1" ng-blur="blur1()" autocomplete="off"><span id="span1"></span>
<div>网址</div>
<input ng-model="popr.url" value="{{popr.url}}" id="text2" ng-blur="blur2()" autocomplete="off"><span id="span2"></span>
</div>


<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="upHide()">关闭</button>
<button class="btn btn-success" ng-click="save()" type="submit">确定</button>
</div>


</div>


</div>


</div>


<div class="panel-head headCtl">
<strong class="icon-reorder on"> 链接管理B区</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" ><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>


<div class="panel-head headCtl"><strong class="icon-reorder on"> 链接管理C区5-1</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" href="javascript:void(0)"><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>


<div class="panel-head headCtl"><strong class="icon-reorder on"> 链接管理C区5-2</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" href="javascript:void(0)"><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>


<div class="panel-head headCtl"><strong class="icon-reorder on"> 链接管理C区5-3</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" href="javascript:void(0)"><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>


<div class="panel-head headCtl"><strong class="icon-reorder on"> 链接管理C区5-4</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" href="javascript:void(0)"><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>


<div class="panel-head headCtl"><strong class="icon-reorder on"> 链接管理C区5-5</strong>
<div class="button-group-little btnCtl">
<a class="button border-blue addBtn" href="javascript:void(0)"><span class="icon-plus-square-o"></span> 添加</a>
<a class="button border-red delBtn" href="javascript:void(0)"><span class="icon-trash-o"></span> 批量删除</a>
</div>
</div>
</div>


</form>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script>
$("input[type=text]").attr("disabled", "disabled");


$(".inputLight").removeAttr("disabled", "disabled");


$(".icon-reorder").click(function() {
$(this).parents().next().slideToggle(200);
$(this).toggleClass("on");
});
var app = angular.module("my", []);
app.controller("cot", function($scope, $filter) {
$scope.list = [
{ title: "天猫", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30", },
{ title: "京东", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" },
{ title: "淘宝", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" },
{ title: "12306", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" },
{ title: "唯品会", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" },
{ title: "优衣库", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" },
{ title: "爱死打死", url: "www.hao222.com", time: "2017/12/6 - 2017/12/30" }
];


$scope.task = $scope.list;


$scope.$watch("serch", function(n, o) {
$scope.task = $filter('filter')($scope.list, n);
});
$scope.abb = function($index) {
if($index >= 0) {


if(confirm("是否删除" + $scope.list[$index].title))
$scope.list.splice($index, 1);
}


};
$scope.popr = {};
var adx = -1;
$scope.update = function($index) {


$("#modal-1").show();
$scope.popr.title = $scope.list[$index].title;
$scope.popr.url = $scope.list[$index].url;
adx = $index;
};


$scope.save = function() {
$scope.list[adx].title = $scope.popr.title;
$scope.list[adx].url = $scope.popr.url;
$("#modal-1").hide();
if($scope.blur1() == true && $scope.blur2() == true) {


return true;
} else {


$("#modal-1").show();


}
};


$scope.upHide = function() {


$("#modal-1").hide();
$scope.popr.title = $scope.list[$index].title;
$scope.popr.url = $scope.list[$index].url;
};
$scope.allmove = function() {
$(":checked").parent().parent().remove();
};
$scope.blur1 = function() {
var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
var text1 = document.getElementById("text1").value;
var span1 = document.getElementById("span1")
if(reg.test(text1)) {
span1.innerHTML = ""
return true;
} else {
span1.innerHTML = "请输入正确标题"
return false;
}


};
$scope.blur2 = function($index) {
var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
var text2 = document.getElementById("text2").value;
var span2 = document.getElementById("span2")
if(reg.test(text2)) {
span2.innerHTML = ""
return true;
} else {
span2.innerHTML = "请输入正确网址"
return false;
}


};
$scope.addTo = function() {
$scope.too = { title: "", url: "", time: "" };
$scope.list.push($scope.too);
};


})
</script>
</body>


</html>

这个把JS.CSS。路径改为自己的就可以直接使用了

爱吃排骨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs表格内容搜索过滤代码.zip
05-28
angularjs表格内容搜索过滤代码基于AngularJS1.3.4制作，根据搜索内容，表格内容分类显示！
angular使用管道实现搜索功能
weixin_33738555的博客
05-09 370
为什么80%的码农都做不了架构师？>>> ...
Angular2—搜索功能(管道)
shunzi1046的博客
10-24 1290
Angular2入坑指南——管道（搜索功能） 想必大家做项目都会遇到搜索功能吧，通常都是搜索本地数据，如果通过http去请求后台再回显的话，那响应速度简直叫人抓狂，所以大多数都是先存到本地然后进行搜索回显。Angular1的方法很简单，只需要在input标签加入ng-model，然后再在想要显示数据的标签加上| filter就好了，然而，Angular2移除了filter和orderBy，他们的理
Angular实现搜索历史功能和todolist (持久化：保存在localStorage中)
qq_41954181的博客
03-15 139
Angular实现搜索历史功能和todolist (持久化：保存在localStorage中) 双向数据绑定
angularjs添加和搜索
不知道的博客
08-28 486
&lt;!DOCTYPE html&gt; &lt;html ng-app="xieapp"&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css&quo
angular-crud:尝试建立一个简单的 CRUD 框架
06-12
当然，这只是一个简单的示例，实际应用可能需要考虑更多的功能，如分页、排序、过滤等。同时，确保你的API安全性和性能也是至关重要的。在开发过程中，可以利用Angular的强大特性，如路由、守卫、管道、指令等，...
Angular-TodoList-App:使用 Angular 构建了一个简单的 todolist 应用程序
07-11
在本项目"Angular-TodoList-App"中，我们看到的是一个使用Angular框架构建的简单待办事项（TodoList）应用程序。Angular是一款由Google维护的前端JavaScript框架，它用于构建高性能、可维护的单页应用（SPA）。让...
Angular之toDoList的实现代码示例
08-28
该实现代码示例提供了一个基本的toDoList组件，包括添加任务、删除任务、编辑任务、完成任务、排序任务、筛选任务等功能。 首先，Angular之toDoList的实现代码示例使用了HTML、CSS和JavaScript三个部分来实现整个...
angular-crud
04-01
本项目“angular-crud”是一个基于 Angular 9 的 CRUD（创建、读取、更新、删除）应用示例，非常适合初学者了解 Angular 框架的基础知识和实战技能。通过这个免费的课程，你可以学习到如何使用 TypeScript 编程语言...
angular table的添加搜索
yedaiyang的博客
12-19 575
资产登记            资产编号     资产名称     资产数量             {{g.id}}     {{g.name}}     {{g.count}}          资产搜索:      资产添加   资产编号:   资产名称:   资产数量:               var mo = angular.modul
angularjs material 实现搜索框
bywayboy的专栏
03-08 7691
Material 提供了大量的android 风格的UI组件，使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。下面是一个组件的实现://前面省略若干代码 directive('mdSearchInput',[function(){ ret
angular表格添加+查找+修改
yu_10_9的博客
10-22 712
html> html ng-app="nbApp"> head lang="en"> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> script type="text/javascript" src="jquery.1.12.4.js">script>
angular 请求网络数据 展示table 查询关键字 过滤 删除 添加 修改
xujiuba的博客
01-12 292
通过接口，请求新闻数据，显示在列表中; 查询关键字 过滤 source ;排序 时间升序，降序，，，点击type按type升序排序;点击添加新闻 下方显示添加区域，输入完成后，点击提交，显示在列表中;操作：提供删除，修改功能 <body ng-app="myapp" ng-controller="myctrl"> <center> <h3 style=" width: 200px; background-color: #009900 ;">IT权威新闻</h3> <i
Angular：多选搜索框默认显示多个搜索条件
灿灿大王搭建的黄金屋
08-21 1254
一个小细节问题，使用AntDesign的组件，一个多选框想要默认显示多个搜索条件时，初始化的时候应该怎么做： 首先HTML上： <nz-form-control> <nz-select nzMode="multiple" nzPlaceHolder="请选择" [formControlName]="bStatus" nzAllowClear="true"...
使用Angular排序和过滤表
culiu9261的博客
07-19 571
When building Angular applications, one of the cornerstones we will use is `ng-repeat`. Showing data is something that we do in applications like when we show a table of users or whatever other data w...
angular表格生成，顺逆排序，搜索
一只程序媛
11-11 835
<!doctype html> <html ng-app="myApp1"> <head> <meta charset="UTF-8"> <title>angular表格生成，顺逆排序，搜索</title> <script src="../src/angular.min.js"></script> <script> var m1=angular.modu
angular初学者福利啦（列表增、删、改）
web前端开发
08-21 2258
1、废话少说、直接上代码 html页面： user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> angular测试 添加列表内容 序号 姓名 年龄 手机号 操作 删除 修改
angular-全部删除
c_hjf的博客
10-23 1021
$scope.delete1=function ($index) { if($scope.data.length>=0){ $scope.data.splice($index); } }; //html代码 button ng-click="delete1($index)" onclck="myfuntion()">全部删除button>
使用angular实现一个简单的分页功能，请举个例子
最新发布
04-21
好的，我可以为您提供一个 Angular 实现的分页功能的示例。 首先，您需要在您的 Angular 项目中安装 ngx-pagination 包，这个包是用来帮助我们快速实现分页功能的。 步骤一：安装 ngx-pagination 包 您只需要运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值