AngularJS實(shí)現(xiàn)表格的增刪改查（僅限前端）
更新時(shí)間：2017年07月04日 16:08:15 作者：CREATE_17
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表格的增刪改查，僅限前端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
用AngularJS實(shí)現(xiàn)對(duì)表格的增刪改查（僅限前端），具體代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實(shí)現(xiàn)表格的增刪改查</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" >
<link rel="stylesheet" href="css/font-awesome.css" type="text/css"></link>
<link rel="stylesheet" href="css/ui.css" type="text/css"></link>
<link rel="stylesheet" href="css/form.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.add{
position:relative;
top:-40px;
left:1000px;
}
</style>
</head>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
<h2>管理信息：</h2><br>
<p>搜索：<input type="text" placeholder="請(qǐng)輸入關(guān)鍵字" ng-model="test"></p>
<button class="btn btn-primary add" ng-click="add()">添加</button>
<table class="table table-bordered" style="text-align: center">
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in texts | filter:test">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.city}}</td>
<td>
<button class="btn btn-warning"" ng-click="update($index)">修改</button>
<button class="btn btn-danger" ng-click="del($index)">刪除</button>
</td>
</tr>
</tbody>
</table>
<!-- 添加信息 -->
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">添加信息</h3>
</div>
<div class="modal-body">
<div>姓名：</div>
<input ng-model="newName" type="text">
<div>年齡：</div>
<input ng-model="newAge" type="text">
<div>城市：</div>
<input ng-model="newCity" type="text">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button class="btn btn-success" ng-click="save()">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改信息 -->
<div class="modal" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">修改信息</h3>
</div>
<div class="modal-body">
<div>姓名：</div>
<input ng-model="prod.name" value="{{prod.name}}" type="text">
<div>年齡：</div>
<input ng-model="prod.age" value="{{prod.age}}" type="text">
<div>城市：</div>
<input ng-model="prod.city" value="{{prod.city}}" type="text">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button class="btn btn-success" ng-click="ensure()">確定</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myCtrl',function($scope){
//定義表格內(nèi)容
$scope.texts = [
{name:"張三",age:"23",city:"海南"},
{name:"李四",age:"25",city:"香港"},
{name:"王五",age:"25",city:"濟(jì)南"},
{name:"劉六",age:"22",city:"濟(jì)南"},
{name:"李七",age:"35",city:"煙臺(tái)"},
{name:"張八",age:"32",city:"聊城"},
{name:"呂九",age:"30",city:"盤(pán)錦"}
];
//定義一個(gè)空對(duì)象，用于保存和修改數(shù)據(jù)時(shí)臨時(shí)存儲(chǔ)
$scope.prod = {};
//定義一個(gè)單擊刪除按鈕時(shí)觸發(fā)的事件，用于刪除選中行
$scope.del = function ($index) {
if($index>=0){
if(confirm("是否刪除"+$scope.texts[$index].name) ){
$scope.texts.splice($index,1);
}
}
};
//定義一個(gè)全局變量idx,用于存儲(chǔ)選中行的索引，方便執(zhí)行保存操作。idx取值為0、1、、、、都有用，所以暫取值為-1;
var idx = -1;
//定義一個(gè)點(diǎn)擊添加按鈕時(shí)觸發(fā)的事件，用于新增數(shù)據(jù)
$scope.add = function(){
//顯示bootstrap中的模塊窗口
$('#modal-1').modal('show');
};
//定義一個(gè)點(diǎn)擊保存按鈕時(shí)觸發(fā)的事件
$scope.save = function(){
//將添加的值賦給數(shù)組
$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});
//關(guān)閉模塊窗口
$('#modal-1').modal('hide');
};
//定義一個(gè)點(diǎn)擊修改按鈕時(shí)出發(fā)的事件，用于修改數(shù)據(jù)
$scope.update = function($index){
//顯示bootstrap中的模塊窗口
$('#modal-2').modal('show');
//將選中行的數(shù)據(jù)綁定到臨時(shí)對(duì)象prod中，在下面的模態(tài)窗口中展示出來(lái)
$scope.prod.name = $scope.texts[$index].name;
$scope.prod.age = $scope.texts[$index].age;
$scope.prod.city = $scope.texts[$index].city;
//選中行的索引賦值給全局變量idx
idx = $index;
};
//定義一個(gè)點(diǎn)擊確定按鈕時(shí)觸發(fā)的事件,
$scope.ensure = function () {
//將修改后的值賦給數(shù)組
$scope.texts[idx].name = $scope.prod.name;
$scope.texts[idx].age = $scope.prod.age;
$scope.texts[idx].city = $scope.prod.city;
//關(guān)閉模塊窗口
$('#modal-2').modal('hide');
};
});
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular4如何自定義首屏的加載動(dòng)畫(huà)詳解
Angular應(yīng)用程序在首次加載根組件時(shí)會(huì)在瀏覽器的顯示一個(gè)loading...動(dòng)畫(huà)，下面這篇文章主要給大家介紹了關(guān)于Angular4如何自定義首屏加載動(dòng)畫(huà)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07
angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
angular json對(duì)象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對(duì)象push到數(shù)組中的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
ng-events類(lèi)似ionic中Events的angular全局事件
這篇文章主要介紹了ng-events類(lèi)似ionic中Events的angular全局事件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS表單提交的方法,結(jié)合完整實(shí)例形式分析了AngularJS表單提交過(guò)程中的數(shù)據(jù)綁定、模塊、控制器等相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了AngularJs表單校驗(yàn)功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了angularjs中的單元測(cè)試實(shí)例,本文主要說(shuō)說(shuō)利用karma和jasmine來(lái)進(jìn)行ng模塊的單元測(cè)試,需要的朋友可以參考下2014-12-12
angularJS?實(shí)現(xiàn)長(zhǎng)按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法
這篇文章主要為大家介紹了angularJS實(shí)現(xiàn)長(zhǎng)按不觸發(fā)點(diǎn)擊事件可以復(fù)制剪貼方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06