angularjs表单_2
发布日期:2022-02-26 14:49:30 浏览次数:51 分类:技术文章

本文共 2294 字,大约阅读时间需要 7 分钟。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.datas=[
{"name":"张三","age":43,"tel":131123456789,"loginData":"2017-01-22"},
{"name":"李四","age":23,"tel":132123456789,"loginData":"2018-02-12"},
{"name":"王五","age":53,"tel":133123456789,"loginData":"2019-03-13"},
{"name":"赵六","age":73,"tel":134123456789,"loginData":"2020-04-29"}];
//批量删除
$scope.deleteAll = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
//循环的到所有勾选上的复选框
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _name = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.datas.length;j++){//到数据源中找到和当前id匹配的商品,删除之
if($scope.datas[j].name == _name){
$scope.datas.splice(j,1);
break;
}
}
}
};
});
</script>
<style>
table{
text-align: center;
}
table tr:nth-child(even){
background-color: #CC9966;
}
table tr:nth-child(odd){
background-color: #993366;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="根据注册日期搜索"style="width: 200px; height: 50px;border-radius: 20px;background-color: yellow;"ng-model="loginDataSelect"/><br /><br /><br />
<table border="1px" cellpadding="1px" cellspacing="0px"bordercolor="red" width="600px"">
<tr style="background-color: cadetblue;">
<td>姓名</td>
<td>年龄</td>
<td>电话</td>
<td>注册日期<select ng-model="DataPaixu"><option></option><option value="loginData">注册日期正序</option><option value="-loginData">注册日期倒序</option></select></td>
<td></td>
</tr>
<tr ng-repeat="d in datas | filter:{loginData:loginDataSelect}|orderBy:DataPaixu">
<td>{
{d.name}}</td>
<td>{
{d.age}}</td>
<td>{
{d.tel}}</td>
<td>{
{d.loginData}}</td>
<td><input type="checkbox" value="{
{d.name}}"/></td>
</tr>
</table>
<br />
<br /><br />
<input type="button" value="删除/批量删除"ng-click="deleteAll();"  style="background-color: yellow;width: 200px;height: 50px;border-radius: 10px;" />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" οnclick="javascrtpt:window.location.href='042900.html'" value="下一页" style="background-color: #0000FF;width: 200px;height: 50px;border-radius: 10px;"/>
</center>
</body>
</html>

转载地址:https://blog.csdn.net/qq_31353347/article/details/80163852 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Viewpager自定义轮播特效(仿京东超市 休闲零食 头部轮播)
下一篇:mvp

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年04月17日 15时27分25秒