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 相关文章推荐
使用JavaScript刷新网页的方法
Jun 04 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JS触摸与手势事件详解
May 09 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
ant design实现圈选功能
Dec 17 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
全面解析JavaScript Module模式
Jul 24 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
php异常处理方法实例汇总
2015/06/24 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python flask实现分页效果
2017/06/27 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
小学生家长评语大全
2014/02/10 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
实习生评语
2014/04/26 职场文书
开票员岗位职责
2015/02/12 职场文书
简爱电影观后感
2015/06/10 职场文书
结婚幸福感言
2015/08/01 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Django框架中视图的用法
2022/06/10 Python