首页 / ANGULAR / AngularJS实现表格的增删改查（仅限前端）

AngularJS实现表格的增删改查（仅限前端）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS实现表格的增删改查（仅限前端），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4909字，纯文字阅读大概需要8分钟。

内容图文

用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" rel="external nofollow" >
 <link rel="stylesheet" href="css/font-awesome.css" rel="external nofollow" type="text/css"></link>
 <link rel="stylesheet" href="css/ui.css" rel="external nofollow" type="text/css"></link>
 <link rel="stylesheet" href="css/form.css" rel="external nofollow" 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">
  <h2>管理信息：</h2><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" style="text-align: center">
   <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> 
      <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>
       <h3 class="modal-title">添加信息</h3>
      </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>
       <h3 class="modal-title">修改信息</h3>
      </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实现表格的增删改查（仅限前端）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/342608.html

来源：【匿名】