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

angularjs中怎么给表格点击添加数据,第1张

首先是html页面的编写:

<!doctype html>

<html ng-app="myModule">

<head>

<meta charset="utf-8">

<title>学生信息管理</title>

//需要用到的一些库,要加载的

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/ng-table/dist/ng-table.js"></script>

<script src="bower_components/ng-table-export/ng-table-export.js"></script>

<link rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" >

<script src="module/scripts/controllers/Form.js"></script>

</head>

<body>

<div ui-view></div>

<div ng-controller="FormController">

<h3>学生信息列表</h3>

<br>

<div>

搜索:<input type="text" ng-model="titleFilter" placeholder="输入关键字">  //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。

</div>

<br>

<table ng-table="tableParams" >

<tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象

<td title="'Name'">

<span ng-if="!student.$edit">{{student.Name}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Name"></div>

</td>

<td title="'Id'">

<span ng-if="!student.$edit">{{student.Id}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Id"></div>

</td>

<td title="'Grade'">

<span ng-if="!student.$edit">{{student.Grade}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Grade"></div>

</td>

<td title="'Actions'" width="200">

<a ng-if="!student.$edit" ng-click="student.$edit=true">Edit</a>

<a ng-if="student.$edit" ng-click="student.$edit=false">Save</a>

<a ng-click="deleteStudent(obj)" ng-if="student.$edit" >Delete</a>

<!-- <a ng-click="addStudent()" ng-if="student.$edit" >Add</a> -->

</td>

</tr>

</table>

<div>

<input type="text" ng-model="newName" placeholder="input Name" required/>

<input type="text" ng-model="newId" placeholder="input Id" required/>

<input type="text" ng-model="newGrade" placeholder="input Grade" required/>

<input type="button" ng-click="addStudent()" value="Add" /> 

</div>

</div>

</body>

</html> 接下来是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)

}

})

//通过$compile动态编译htmlvar html="<div ng-click='test()'>我是后添加的</div>"

var template = angular.element(html)

var mobileDialogElement = $compile(template)($scope)

angular.element("#"+id).append(mobileDialogElement)// remove移除创建的元素

var closeMobileDialog = function () {

if (mobileDialogElement) {  

mobileDialogElement.remove()

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11567143.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存