angular v1.5.8 表格增删改查

攻城师

2019-06-25

1

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名:  <input type="text" ng-model="firstName"><br>
    <hr>
    <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>
</div>

<script>
var app = angular.module('myApp', []);
app.directive("edit", function(){
  return{
    restrict: "E",
    link: function(scope,element,attrs,ngModel){
      element.bind("click",function(e){
        scope.$apply(function(){
           angular.copy(scope.master,ngModel.$modelValue);
           
         })
      });
    }
  }
});
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  
  $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 = {};
});
  

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;
         })
      })
    }
  }
});
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;
         })
      })
    }
  }
});
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);
        })
      })
    }
  }
});
</script>

</body>
</html>

2 列表双向绑定

angular v1.5.8 表格增删改查

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="add()">增加一个</button>
<div ng-repeat="person in list">
  <input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" />
    <a ng-show="$index!=0" style="color:red;" ng-click="del($index)">移除</a>
</div>
        
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
  $scope.list=[{id:1,age:30,name:"李四"},
         {id:2,age:30,name:"李四"}];
  
  $scope.add=function(){
//    var obj={id:101,age:30,name:"李四"};
    var obj={};
    $scope.list.push(obj);
}

$scope.del=function(idx){
    $scope.list.splice(idx,1);
}
});
</script>

</body>
</html>

angular html表格 ng-model