AngularJS Tabular Data with Edit/Update/Delete

時間 2019-11-29

標籤 angularjs tabular data edit update delete 欄目 AngularJS 简体版

原文原文鏈接

效果css

首先，咱們先創建一些數據，固然你能夠從你任何地方讀出你的數據html

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.employees =[{id:101, name:'John', phone:'555-1276'},
                           {id:102, name:'Mary', phone:'800-1233'},
                           {id:103,name:'Mike', phone:'555-4321'},
                           {id:104,name:'Adam', phone:'555-5678'},
                           {id:105,name:'Julie', phone:'555-8765'},
                           {id:106,name:'Juliette', phone:'555-5678'}];

$scope.showEdit = true;
$scope.master = {};jquery

});

這裏，咱們能夠直接angularjs

var app = angular.module('plunker',[]);

由於咱們沒有用到angular的bootstrap.express

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    
    <script src="jquery-1.11.0.min.js"></script>
    <script src="ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script src="bootstrap.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="bootstrap.css" />
    <link rel="stylesheet" href="mycss.css" />
  </head>

  <body ng-controller="MainCtrl">
    <h2>Inline Edit</h2>
    <!--<input id="test" value="ddd"/>-->
    <table>
      <tr>
        <th>name</th>
        <th>phone</th>
        <th></th>
      </tr>
      <tr ng-repeat="employee in employees">
        <td>
          <input type="text" id='txt_name_{{employee.id}}' ng-model="employee.name" class="inactive" readonly />
        </td>
        <td> <input type="text" ng-model="employee.phone" class="inactive" readonly /></td>
        <td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
            <update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update> 
            <cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
          | <delete ng-Model="employee"><a>Delete</a></delete>
          
        </td>
      </tr>
    </table>
  </body>

</html>

在這裏，咱們使用一個<table>來顯示全部的employee的name和phone,爲了簡單，咱們這裏只對employee name進行修改。在這裏，咱們自定義三個標籤，<edit>,<update>,<delete>bootstrap

咱們來看其中一個標籤，<edit>,這裏呢，咱們用ng-Model來綁定employee這個對象。app

這裏，咱們用angular的directive來對着三個標籤進行事件的綁定ui

angular的dirctive主要做用於DOM對象，並且他能夠對spa

Element Name (好比<edit></edit>) 對應於 E:
Attribute(好比<mytag edit=」express」></mytag> 對應於 A
Comment <!-- my comment –> 對應於 M
Class <link class=」mycssclass」></link> 對應於 C

默認對Attribute （A),插件

當咱們有

app.directiv("edit", function(){
  return{
    restrict: "E"，

    . . . .

}

});

意思是說，咱們要找到叫Element=」edit」的DOM對象，這裏就是<edit>,

固然你也能夠攜程 restrict: 「AE」，那意思就是說要找到Element或者attribute = edit的DOM對象

這裏你能夠隨便對AEMC進行組合。

當你找到以後呢，就要對這個DOM進行操做，對於咱們來講，就是對他綁定一個click的事件

app.directive("edit", function(){
  return{
    restrict: "E",
    link: function(scope,element){
      element.bind("click",function(e){
        alert("I am clicked for editing");
      });
    }
  }
})

這個時候呢，當你點Edit的時候呢，click事件就會觸發。

再往下呢就是對edit click事件的延伸，咱們要獲得employee name的inputbox，而後對他進行css的轉換，好比當你click edit後，應該出現inputbox的css的inactive或者active的調整，而且移除readOnly

這裏要注意一件事，就是angular.copy，爲何使用angular.copy?這個是爲後面的cancel作準備的，當你放棄修改的時候，你但願你的值恢復成原樣，這個時候，對於angularJS來講，是要對model恢復原樣。如何恢復修改以前的model?最簡單的方法就是建立一個$scope.master = {}空的對象，而後在你click edit以後，立刻把還沒改變的model拷貝到這個空的master中去，把master做爲一個臨時的存儲對象。

當咱們click Edit以後，咱們要隱藏Edit,而叫Update | Cancel出現。這個時候$scope.showEdit就用上了，在<edit>，<update>,<cancel>上面都有一個ng-show，這個flag用來指定這個元素是否是要顯示。ng-show=」showEdit」這個值是綁定$scope.showEdit的。

完整的edit

app.directive("edit",function($document){
  return{
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope,element,attrs,ngModel){
       element.bind("click",function(){
       var id = "txt_name_" +ngModel.$modelValue.id;
       scope.$apply(function(){
         angular.copy(ngModel.$modelValue,scope.master);
         //console.log(scope.master);
       })
       //console.log(id);
       var obj = $("#"+id);
       obj.removeClass("inactive");
       obj.addClass("active");
       obj.removeAttr("readOnly");
       scope.$apply(function(){
         scope.showEdit = false;
       })
      });
    }
  }
});

css

.inactive {
    border: none;
    background-color: #fff;
}
.active{
  background-color: #fff;
}

下面，咱們要給Update作事件的綁定。這裏就沒用什麼可說的了。

app.directive("update",function($document){
  return{
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope,element,attrs,ngModel){
      element.bind("click",function(){
         alert(ngModel.$modelValue + " is updated, Update your value here.");
         var id = "txt_name_" +ngModel.$modelValue.id;
         var obj = $("#"+id);
         obj.removeClass("active");
         obj.addClass("inactive");
         obj.attr("readOnly",true);
          scope.$apply(function(){
           scope.showEdit = true;
         })
      })
    }
  }
})

在下面就是Cancel了，上面說過了，Cancel的時候要還原以前的值，這個時候呢，咱們就用angular.copy把當時臨時存儲的$scope.master拷貝回model去

app.directive("cancel",function($document){
  return{
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope,element,attrs,ngModel){
      element.bind("click",function(){
         scope.$apply(function(){
           angular.copy(scope.master,ngModel.$modelValue);
           //console.log(ngModel.$modelValue);
         })
         
         var id = "txt_name_" +ngModel.$modelValue.id;
         var obj = $("#"+id);
         obj.removeClass("active");
         obj.addClass("inactive");
         obj.prop("readOnly",true);
          scope.$apply(function(){
           scope.showEdit = true;
         })
      })
    }
  }
});

最後就是Delete了，其實永遠都要記住的事Angular是MVC，因此你這裏你不用操心刪除table行這樣的事，只要刪除model中emploee.id = @id就能夠了

app.directive("delete",function($document){
  return{
    restrict:'AE',
    require: 'ngModel',
    link:function(scope, element, attrs,ngModel){
      element.bind("click",function(){
        var id = ngModel.$modelValue.id;
        alert("delete item where employee id:=" + id);
        scope.$apply(function(){
          for(var i=0; i<scope.employees.length; i++){
            if(scope.employees[i].id==id){
               console.log(scope.employees[i])
               scope.employees.splice(i,1);
            }
          }
          console.log(scope.employees);
        })
      })
    }
  }
});

基本上就完工了。這裏我沒有用任何現成的angular 插件，這只是對angular基本原理的闡述，若有誤導或者有能簡單的方法請指教。

最後代碼Demo

http://plnkr.co/2flW8l

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。