angular表格添加_AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端)，具体代码：

实现表格的增删改查

.add{

position:relative;

top:-40px;

left:1000px;

}

管理信息：

搜索：

添加

姓名年龄城市操作

{{x.name}}{{x.age}}{{x.city}}

修改 

删除

添加信息

姓名：

年龄：

城市：

关闭

保存

修改信息

姓名：

年龄：

城市：

关闭

确定

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

app.controller('myCtrl',function($scope){

//定义表格内容

$scope.texts = [

{name:"张三",age:"23",city:"海南"},

{name:"李四",age:"25",city:"香港"},

{name:"王五",age:"25",city:"济南"},

{name:"刘六",age:"22",city:"济南"},

{name:"李七",age:"35",city:"烟台"},

{name:"张八",age:"32",city:"聊城"},

{name:"吕九",age:"30",city:"盘锦"}

];

//定义一个空对象，用于保存和修改数据时临时存储

$scope.prod = {};

//定义一个单击删除按钮时触发的事件，用于删除选中行

$scope.del = function ($index) {

if($index>=0){

if(confirm("是否删除"+$scope.texts[$index].name) ){

$scope.texts.splice($index,1);

}

}

};

//定义一个全局变量idx,用于存储选中行的索引，方便执行保存操作。idx取值为0、1、、、、都有用，所以暂取值为-1;

var idx = -1;

//定义一个点击添加按钮时触发的事件，用于新增数据

$scope.add = function(){

//显示bootstrap中的模块窗口

$('#modal-1').modal('show');

};

//定义一个点击保存按钮时触发的事件

$scope.save = function(){

//将添加的值赋给数组

$scope.texts.name = $scope.newName;

$scope.texts.age = $scope.newAge;

$scope.texts.city = $scope.newCity;

$scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});

//关闭模块窗口

$('#modal-1').modal('hide');

};

//定义一个点击修改按钮时出发的事件，用于修改数据

$scope.update = function($index){

//显示bootstrap中的模块窗口

$('#modal-2').modal('show');

//将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来

$scope.prod.name = $scope.texts[$index].name;

$scope.prod.age = $scope.texts[$index].age;

$scope.prod.city = $scope.texts[$index].city;

//选中行的索引赋值给全局变量idx

idx = $index;

};

//定义一个点击确定按钮时触发的事件,

$scope.ensure = function () {

//将修改后的值赋给数组

$scope.texts[idx].name = $scope.prod.name;

$scope.texts[idx].age = $scope.prod.age;

$scope.texts[idx].city = $scope.prod.city;

//关闭模块窗口

$('#modal-2').modal('hide');

};

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。