AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

AngularJS实现表格数据的编辑,更新和删除

效果

 AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除_第1张图片

实现

首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据

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 = {};
});

因为我们没有用到angularbootstrap.这里,我们可以直接

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


 
  
    
    AngularJS Plunker
    
     
    
     
    
    
    
    
    
    
  
 
  
    

Inline Edit

name phone
Edit Update | Cencel | Delete

我们来看其中一个标签,,这里呢,我们用ng-Model来绑定employee这个对象。

这里,我们用angulardirective来对着三个标签进行事件的绑定

angulardirctive主要作用于DOM对象,而且他可以对Element Name (比如)  对应于E:)、Attribute(比如express对应于A、

Comment 

你可能感兴趣的:(AngularJS,Angularjs,1.x,Column)