前端之家收集整理的这篇文章主要介绍了
angular v1.5.8 表格增删改查，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
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> 原文链接：https://www.f2er.com/angularjs/145797.html
