Angularjs中表格的增刪改查

時間  2019-11-12
標籤 angularjs 表格 增刪 欄目 AngularJS 简体版
原文   原文鏈接

整體的效果圖是：css

圖中的每一個按鈕都是能夠實現其操做的。html

（1）首先是html頁面的編寫：bootstrap

<!doctype html>app

<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" href="bower_components/ng-table/dist/ng-table.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="module/styles/form.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" class="table table-bordered">
<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 class="form-control" 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 class="form-control" 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 class="form-control" type="text" ng-model="student.Grade"></div>
</td>
<td title="'Actions'" width="200">
<a href="" ng-if="!student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=true">Edit</a>
<a href="" ng-if="student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student.$edit" class="btn btn-default btn-xs" >Delete</a>
<!-- <a href="" ng-click="addStudent()" ng-if="student.$edit" class="btn btn-default btn-xs">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" class="btn"/>
</div>
</div>
</body>
</html>測試

（2）JS代碼部分：ui

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);
};
});spa

（3）測試發現上面的方法刪除的都是最後一行的內容，接下來改動一點使得能夠刪除選定行，而且對其加以序列號：component

　　deleteStudent（）函數：orm

　　$scope.deleteStudent=function(index){   //刪除選中的一行
$scope.students.splice(index,1);
};

在HTML頁面中也須要改動一點：<a ng-click="deleteStudent($index)" ng-if="student.$edit" class="btn btn-default btn-xs" >Delete</a>

即在deleteStudent（）中傳入當前行的索引index。

具體代碼讀奉上，但願對您能夠有點幫助。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程