AngularJS實現(xiàn)表格的增刪改查（僅限前端）
更新時間：2017年07月04日 16:08:15 作者：CREATE_17
這篇文章主要介紹了AngularJS實現(xiàn)表格的增刪改查，僅限前端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用AngularJS實現(xiàn)對表格的增刪改查（僅限前端），具體代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實現(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="請輸入關(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:"煙臺"},
{name:"張八",age:"32",city:"聊城"},
{name:"呂九",age:"30",city:"盤錦"}
];
//定義一個空對象，用于保存和修改數(shù)據(jù)時臨時存儲
$scope.prod = {};
//定義一個單擊刪除按鈕時觸發(fā)的事件，用于刪除選中行
$scope.del = function ($index) {
if($index>=0){
if(confirm("是否刪除"+$scope.texts[$index].name) ){
$scope.texts.splice($index,1);
}
}
};
//定義一個全局變量idx,用于存儲選中行的索引，方便執(zhí)行保存操作。idx取值為0、1、、、、都有用，所以暫取值為-1;
var idx = -1;
//定義一個點擊添加按鈕時觸發(fā)的事件，用于新增數(shù)據(jù)
$scope.add = function(){
//顯示bootstrap中的模塊窗口
$('#modal-1').modal('show');
};
//定義一個點擊保存按鈕時觸發(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');
};
//定義一個點擊修改按鈕時出發(fā)的事件，用于修改數(shù)據(jù)
$scope.update = function($index){
//顯示bootstrap中的模塊窗口
$('#modal-2').modal('show');
//將選中行的數(shù)據(jù)綁定到臨時對象prod中，在下面的模態(tà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;
};
//定義一個點擊確定按鈕時觸發(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angularJS 中$scope方法使用指南,需要的朋友可以參考下2015-02-02
AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。這篇文章主要帶著大家理解Angular數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-01-01
走進(jìn)AngularJs之過濾器（filter）詳解
本篇文章主要介紹了AngularJs之過濾器（filter）詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文主要介紹AngularJS 過濾器,這里提供詳細(xì)了AngularJS 過濾器詳細(xì)資料,并提供簡單實例,有需要的朋友可以參考下2016-07-07
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現(xiàn)這種功能的通過這篇文章來看看吧。2016-09-09
Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對表單提交內(nèi)容進(jìn)行驗證的操作方法，需要的的朋友參考下吧2017-07-07
AngularJS constant和value區(qū)別詳解
angularJS可以通過constant(name,value)和value(name,value)對于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02
這篇文章主要介紹了angular強制更新ui視圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
AngularJS基礎(chǔ) ng-hide 指令用法及示例代碼
本文主要介紹AngularJS ng-hide 指令,這里整理了ng-hide指令的基礎(chǔ)資料,并附實例代碼,有興趣的小伙伴參考下2016-08-08