angular v1.5.8 表格增删改查

发布时间：2020-12-17 08:40:33 所属栏目：安全来源：网络整理

导读：1 !DOCTYPE htmlhtmlmeta charset="utf-8"script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/scriptbodydiv ng-app="myApp" ng-controller="myCtrl"名: input type="text" ng-model="firstName"br hr table tr thname/th thp

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',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(){
         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',link:function(scope,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 列表双向绑定

<!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,name:"李四"}];
  
  $scope.add=function(){
//    var obj={id:101,name:"李四"};
    var obj={};
    $scope.list.push(obj);
}

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

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!