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 来操作字符串(一些字符串函数)
Feb 15 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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
1 Tube Radio
2021/03/02 无线电
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
python学习数据结构实例代码
2015/05/11 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python如何让类支持比较运算
2018/03/20 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
浅析Django中关于session的使用
2019/12/30 Python
详解Scrapy Redis入门实战
2020/11/18 Python
python 操作excel表格的方法
2020/12/05 Python
python压包的概念及实例详解
2021/02/17 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
毕业生求职的求职信
2013/12/05 职场文书
小学体育教学反思
2014/01/31 职场文书
小学生检讨书大全
2014/02/06 职场文书
高中军训感言600字
2014/03/11 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
支行行长竞聘报告
2014/11/06 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
Python预测分词的实现
2021/06/18 Python