angularJs 表格添加删除修改查询方法


Posted in Javascript onFebruary 27, 2018

如下所示:

<!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">
<div 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>
 <div class="conner">
 <div 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>
 </div>
 <div 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>
 </div>
 </div>
 <button ng-click="submit()">提交</button>
</div>
</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;
}

以上这篇angularJs 表格添加删除修改查询方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
ExtJs整合Echarts的示例代码
Feb 27 #Javascript
angularJS实现动态添加,删除div方法
Feb 27 #Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
You might like
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
python实现换位加密算法的示例
2018/10/14 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
机械专业应届生求职信
2013/09/21 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
料理师求职信
2014/01/30 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
教师新年寄语
2014/04/03 职场文书
实习协议书范本
2014/04/22 职场文书
学校三节实施方案
2014/06/09 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
十月围城观后感
2015/06/08 职场文书
个人工作决心书
2015/09/22 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python