AngularJS如何实现表格的增删改查

这篇文章主要介绍了AngularJS如何实现表格的增删改查，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联是一家专业从事成都网站建设、网站制作的网络公司。作为专业网站设计公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都营销网站建设及网站设计开发服务！

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

用AngularJS实现对表格的增删改查（仅限前端），具体代码：

AngularJS如何实现表格的增删改查

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>实现表格的增删改查</title>
 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/font-awesome.css" type="text/css"></link>
 <link rel="stylesheet" href="css/ui.css" type="text/css"></link>
 <link rel="stylesheet" href="css/form.css" type="text/css"></link>
 
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <style>
 .add{
  position:relative;
  top:-40px;
  left:1000px;
 }
 </style>
 </head>
 
 <body>
 <div ng-app="myapp" ng-controller="myCtrl">
 <h3>管理信息：</h3><br>
 <p>搜索：<input type="text" placeholder="请输入关键字" ng-model="test"></p>
 <button class="btn btn-primary add" ng-click="add()">添加</button>
 <table class="table table-bordered" >
  <thead>
  <tr>
   <td>姓名</td>
   <td>年龄</td>
   <td>城市</td>
   <td>操作</td>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="x in texts | filter:test">
   <td>{{x.name}}</td>
   <td>{{x.age}}</td>
   <td>{{x.city}}</td>
   <td>
   <button class="btn btn-warning"" ng-click="update($index)">修改</button>&nbsp;
   <button class="btn btn-danger" ng-click="del($index)">删除</button>
   </td>
  </tr>
  </tbody>
 </table>
 
 <!-- 添加信息 -->
 <div class="modal" id="modal-1">

  <div class="modal-dialog">

   <div class="modal-content">

   <div class="modal-header">
    <button class="close" data-dismiss="modal">
    <span class="glyphicon glyphicon-remove"></span>
    </button>
    <h4 class="modal-title">添加信息</h4>
   </div>

   <div class="modal-body">
    <div>姓名：</div>
    <input ng-model="newName" type="text">
    <div>年龄：</div>
    <input ng-model="newAge" type="text">
    <div>城市：</div>
    <input ng-model="newCity" type="text">
   </div>

   <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">关闭</button>
    <button class="btn btn-success" ng-click="save()">保存</button>
   </div>

   </div>

  </div>

 </div>
 
 <!-- 修改信息 -->
 <div class="modal" id="modal-2">

  <div class="modal-dialog">

   <div class="modal-content">

   <div class="modal-header">
    <button class="close" data-dismiss="modal">
    <span class="glyphicon glyphicon-remove"></span>
    </button>
    <h4 class="modal-title">修改信息</h4>
   </div>

   <div class="modal-body">
    <div>姓名：</div>
    <input ng-model="prod.name" value="{{prod.name}}" type="text">
    <div>年龄：</div>
    <input ng-model="prod.age" value="{{prod.age}}" type="text">
    <div>城市：</div>
    <input ng-model="prod.city" value="{{prod.city}}" type="text">
   </div>

   <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">关闭</button>
    <button class="btn btn-success" ng-click="ensure()">确定</button>
   </div>

   </div>

  </div>

  </div>
 </div>
 
 <script type="text/javascript">
 var app = angular.module('myapp',[]);
 app.controller('myCtrl',function($scope){
  //定义表格内容
  $scope.texts = [
  {name:"张三",age:"23",city:"海南"},
  {name:"李四",age:"25",city:"香港"},
  {name:"王五",age:"25",city:"济南"},
  {name:"刘六",age:"22",city:"济南"},
  {name:"李七",age:"35",city:"烟台"},
  {name:"张八",age:"32",city:"聊城"},
  {name:"吕九",age:"30",city:"盘锦"}
  ];
  //定义一个空对象，用于保存和修改数据时临时存储
  $scope.prod = {};
  //定义一个单击删除按钮时触发的事件，用于删除选中行
  $scope.del = function ($index) {
  if($index>=0){
   if(confirm("是否删除"+$scope.texts[$index].name) ){
   $scope.texts.splice($index,1);
   }
  }
  };
  
  //定义一个全局变量idx,用于存储选中行的索引，方便执行保存操作。idx取值为0、1、、、、都有用，所以暂取值为-1;
  var idx = -1;
  //定义一个点击添加按钮时触发的事件，用于新增数据
  $scope.add = function(){
  //显示bootstrap中的模块窗口
  $('#modal-1').modal('show');
  
  };
  //定义一个点击保存按钮时触发的事件
  $scope.save = function(){
  //将添加的值赋给数组
  $scope.texts.name = $scope.newName;
  $scope.texts.age = $scope.newAge;
  $scope.texts.city = $scope.newCity;
  $scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});
  //关闭模块窗口
  $('#modal-1').modal('hide');
  };
  
  
  //定义一个点击修改按钮时出发的事件，用于修改数据
  $scope.update = function($index){
  //显示bootstrap中的模块窗口
  $('#modal-2').modal('show');

  //将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来
  $scope.prod.name = $scope.texts[$index].name;
  $scope.prod.age = $scope.texts[$index].age;
  $scope.prod.city = $scope.texts[$index].city;
  //选中行的索引赋值给全局变量idx
  idx = $index;
  };

  //定义一个点击确定按钮时触发的事件,
  $scope.ensure = function () {
  //将修改后的值赋给数组
  $scope.texts[idx].name = $scope.prod.name;
  $scope.texts[idx].age = $scope.prod.age;
  $scope.texts[idx].city = $scope.prod.city;
  //关闭模块窗口
  $('#modal-2').modal('hide');
  };
  
  
  
 });
 </script>
 </body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“AngularJS如何实现表格的增删改查”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

文章题目：AngularJS如何实现表格的增删改查
当前链接：https://www.cdcxhl.com/article6/peceig.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、服务器托管、虚拟主机、营销型网站建设、网站维护、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

手机网站建设

微信小程序知识

行业网站建设