angularjs中怎么给表格点击添加数据

2024-11-05 23:25:32

推荐回答（5个）

回答1：

首先是html页面的编写：





学生信息管理
//需要用到的一些库，要加载的

学生信息列表

搜索： //加上实现了表格内容的检索。

//遍历每一个对象

Edit

Save

Delete

接下来是js代码部分

var myModule=angular.module('myModule',['ngTable']).
controller('FormController',function($scope,ngTableParams,$sce){
$scope.students=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',Grade:'计算机技术'}
];
$scope.addStudent=function(){       //添加学生函数
$scope.students.push({Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade});
$scope.newName='';
$scope.newId='';
$scope.newGrade='';
};
$scope.deleteStudent=function(student){   //删除一行的内容
$scope.students.splice($scope.students.indexOf(student),1);
};
});

回答2：

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 if(scope.employees[i].id==id){
console.log(scope.employees[i])
scope.employees.splice(i,1);
}
}
console.log(scope.employees);
})
})
}
}
});

基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。

回答3：

页面里ng-click="add()"
再写一个隐藏的

目的是获取添加的数据

controller里面$scope. add=function(){
div显示

}
$scope.submit=function(){
var add=$scope.add
$http({
url:
params:add
..

}).then(function(){..})

}

我现在是这么写的

回答4：

首先，我们先建立一些数据，当然你可以从你任何地方读出你的数据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 = {};

AngularJS Plunker

Inline Edit

name	phone
		Edit Update \| Cencel \| Delete

在这里，我们使用一个来显示所有的employee的name和phone,为了简单，我们这里只对employee name进行修改。在这里，我们自定义三个标签，,,
我们来看其中一个标签，,这里呢，我们用ng-Model来绑定employee这个对象。
这里，我们用angular的directive来对着三个标签进行事件的绑定
angular的dirctive主要作用于DOM对象，而且他可以对
Element Name (比如) 对应于 E:
Attribute(比如对应于 A
Comment