在angularJs中如何通过表格添加删除修改查询方法-js教程-PHP中文网

首页

web前端

js教程

在angularJs中如何通过表格添加删除修改查询方法

亚连

Jun 04, 2018 am 10:40 AM

angularjs javascript 添加

下面我就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="agl/angular.min.js"></script>
 <script>
  var app=angular.module("mpp",[]);
  app.controller("ctrl",function ($scope) {
   $scope.arr=[];
   $scope.add=function () {
    $scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
   }
   $scope.submit=function () {
    for (var i=0;i<$scope.arr.length;i++)
    {
     if($scope.arr[i].name==$scope.name2)
     {
     if($scope.arr[i].password==$scope.pass)
     {
      if($scope.pass2==$scope.pass){
       $scope.arr[i].password=$scope.pass2;
      }else{
       alert("两次输入不一致");
      }
     }else {
      alert("密码错误");
     }
     }else {
      alert("用户名错误");
     }
    }
   }
   $scope.flag=false;
   $scope.show=function () {
    $scope.flag=true;
   }
  })
 </script>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body ng-app="mpp" ng-controller="ctrl">
<p class="inner">
 <input type="text" placeholder="用户名查询" ng-model="user">
 <input type="text" placeholder="年龄范围查询" ng-model="ages">
 <select ng-model="sexs">
  <option value="男">男</option>
  <option value="女">女</option></select>
 <button>全部删除</button>
 <TABLE>
  <tr>
   <th>Id</th>
   <th>用户名</th>
   <th>密码</th>
   <th>年龄</th>
   <th>性别</th>
   <th>操作</th>
  </tr>
  <tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
   <td>{{$index+1}}</td>
   <td>{{item.name}}</td>
   <td>{{item.password}}</td>
   <td>{{item.age}}</td>
   <td>{{item.sex}}</td>
   <td><button ng-click="show()">修改密码</button></td>
  </tr>
 </TABLE>
 <button ng-click="add()">添加用户</button>
 <p class="conner">
 <p class="add">
  用户名：<input type="text" ng-model="name"><br>
  密 码：<input type="password" ng-model="password"><br>
  年 龄：<input type="text" ng-model="age"><br>
  性 别：<select ng-model="sex">
  <option value="男">男</option>
  <option value="女">女</option></select><br>
 </p>
 <p class="update" ng-show="flag">
  用户名：<input type="text" ng-model="name2"><br>
  旧密码：<input type="text" ng-model="pass"><br>
  新密码：<input type="password" ng-model="pass2"><br>
  确认密码：<input type="password" ng-model="pass3"><br>
 </p>
 </p>
 <button ng-click="submit()">提交</button>
</p>
</body>
</html>

登录后复制

css

*{

 margin: 0;
 padding: 0;
}
.inner{
 margin: 20px auto;
 text-align: center;
}
table{
 margin: 10px auto;
 text-align: center;
}
tr{
 border-collapse: collapse;
}
tr th,td{
 border:1px solid #000000;
 width: 60px;
}
.conner{
 width: 600px;
 height: 300px;
 background: #ffe7e0;
 margin: 0 auto;
}
.add{
 margin: 10px auto;
 padding-top: 20px;
 width: 260px;
 height: 120px;
 border: 2px solid #e42112;
}
.update{
 width: 280px;
 height: 120px;
 border: 2px solid #e42112;
 text-align: center;
 margin: 10px auto;
 padding-top: 20px;
}

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

在node.js中如何实现下载图片

在vue中使用eventBus如何实现同级组件的通讯

在vue2.0中如何实现自定义饼状图 (Echarts)组件

以上是在angularJs中如何通过表格添加删除修改查询方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1276

C# 教程

1256

显示更多

Related knowledge

win11添加新硬盘教程 Jan 05, 2024 am 09:39 AM

在购买电脑的时候，不一定会选择很大的硬盘，这时候如果我们想在win11添加新硬盘，可以先安装购买的新硬盘，然后在电脑里添加分区就可以了。win11添加新硬盘教程：1、首先，我们拆开主机，找到硬盘的插槽。2、找到后，我们先接上“数据线”，一般会有防呆设计，插不进去反个方向即可。3、随后将新的硬盘插入硬盘插槽。4、插入后，将数据线的另一头接到电脑的主板上。5、安装完成后，就可以装回主机，并开机了。6、开机后，我们右键“此电脑”，打开“计算机管理”7、打开后，点击左下角的“磁盘管理”8、随后在右边可以

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

米家怎么添加电视 Mar 25, 2024 pm 05:00 PM

很多用户们在现代生活中越来越青睐小米智能家居互联的电子生态，那么连接米家APP后，你就可以轻松用手机来控制连接设备，但是很多用户们还不知如何将自己的家居添加米家app中，那么这篇教程攻略就将为大家带来具体连接方法步骤攻略，希望能帮助到各位有需要的小伙伴们。1、下载米家APP后，创建或者登录小米账户。2、添加方法：当全新的设备通电后，将手机靠近设备并打开小米电视，正常情况下会弹出连接提示，选择“确定”即进入设备连接流程。若无提示弹出，也可以手动添加设备，方法是：进入智能家庭APP后，点击左下方第1

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

Win11快速创建桌面快捷方式的教程 Dec 27, 2023 pm 04:29 PM

在win11中，我们可以通过添加桌面快捷方式的方法在桌面上快速启动软件或文件，而且只需要右键需要的文件就可以操作了。win11添加桌面快捷方式：1、打开“此电脑”，找到你想要添加桌面快捷方式的文件或软件。2、找到后，右键选中它，点击“显示更多选项”3、再选择“发送到”-“桌面快捷方式”4、操作完成后，就可以在桌面上找到快捷方式了。

在MetaMask钱包中如何连接到Polygon网络？MetaMask钱包连接到Polygon网络的教程指南 Jan 19, 2024 pm 04:36 PM

如何添加PolygonMainnet网络要将MATIC（Polygon）与Metamask链接使用，您需要添加一个名为“PolygonMainnet”的专用网络。使用错误的网络地址进行转入会导致出现问题，所以在转出$MATIC之前，请务必使用“PolygonMainnet”网络。Metamask钱包默认连接到以太坊主网，但是我们可以很简单地添加“PolygonMainnet”并使用$MATIC。只需简单的复制和粘贴几个步骤，就能完成。首先，在Metamask钱包中，点击右上角的网络选项，选择“C

Tampermonkey怎么添加新脚本-Tampermonkey怎么删除脚本 Mar 18, 2024 pm 12:10 PM

Tampermonkey油猴Chrome扩展是一款用户脚本管理插件，通过脚本提高了用户的效率和浏览体验，那么Tampermonkey怎么添加新脚本？怎么删除脚本呢？下面就让小编给大家解答下吧!Tampermonkey怎么添加新脚本：1、这里拿GreasyFork来举例子，打开GreasyFork网页，输入要按照的脚本，小编这里选择的一键离线下载2、选择一个脚本，进入脚本页面后可以看到安装此脚本的按钮3、点击安装此脚本，来到安装界面。这里点击安装就可以了4、我们可以在以安装的脚本中看到安装好的一键

See all articles

在angularJs中如何通过表格添加删除修改查询方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题