<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
<title>Sourcecodester</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<script src = "js/angular.js"></script>
<script src = "js/app.js"></script>
</head>
<body ng-app = "myModule" ng-controller = "myController">
<nav class = "navbar navbar-default">
<div class = "containet-fluid">
<a class = "navbar-brand" href = "https://www.sourcecodester.com" >Sourcecodester</a>
</div>
</nav>
<div class = "row">
<div class = "col-md-2"></div>
<div class = "col-md-8 well">
<h3 class = "text-primary">Simple CRUD Operation Using AngularJS - Part 2</h3>
<hr style = "border-top:1px dotted #000;"/>
<div class = "alert alert-info">Members Personal Information <button class = "btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#add_member"><span class = "glyphicon glyphicon-plus"></span></button></div>
<div class = "container-fluid">
<br />
<br />
<table class = "table table-bordered alert-warning">
<thead>
<tr>
<th>Member ID</th>
<th>Full Name</th>
<th>Email</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "member in members">
<td>{{$index+1}}</td>
<td>{{member.name}}</td>
<td>{{member.email}}</td>
<td>{{member.gender}}</td>
<td><button type = "button" data-toggle = "modal" data-target = "#update_member" ng-click = "selectMember(member)" class = "btn btn-sm btn-warning"><span class = "glyphicon glyphicon-edit"></span> Update</button> | <button type = "button" data-toggle = "modal" data-target = "#delete_member" class = "btn btn-sm btn-danger"><span class = "glyphicon glyphicon-trash"></span> Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="add_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-info" id="myModalLabel">Member Registration</h4>
</div>
<div class="modal-body">
<div class = "form-group">
<label>Full Name</label>
<input type = "text" class = "form-control" ng-model = "newMember.name"/>
</div>
<div class = "form-group">
<label>Email</label>
<input type = "email" class = "form-control" ng-model = "newMember.email"/>
</div>
<div class = "form-group">
<label>Gender</label>
<select class = "form-control" ng-model = "newMember.gender" >
<option value = "">Choose an option</option>
<option value = "Male">Male</option>
<option value = "Female">Female</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click = "saveMember()" data-dismiss = "modal"><span class = "glyphicon glyphicon-save"></span> Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="update_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-info" id="myModalLabel">Updating Member</h4>
</div>
<div class="modal-body">
<div class = "form-group">
<label>Full Name</label>
<input type = "text" class = "form-control" ng-model = "selectedMember.name"/>
</div>
<div class = "form-group">
<label>Email</label>
<input type = "email" class = "form-control" ng-model = "selectedMember.email"/>
</div>
<div class = "form-group">
<label>Gender</label>
<select class = "form-control" ng-model = "selectedMember.gender" >
<option value = "">Choose an option</option>
<option value = "Male">Male</option>
<option value = "Female">Female</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss = "modal" ng-click = "update_member()"><span class = "glyphicon glyphicon-edit"></span> Update</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="delete_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-body">
<center><h4 class = "text-danger">Are you sure you want to delete this record?</h4></center>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss = "modal" ng-click = "deleteMember()"><span class = "glyphicon glyphicon-check"></span> Yes</button>
<button class="btn btn-success" data-dismiss = "modal"><span class = "glyphicon glyphicon-remove"></span> No</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script src = "js/bootstrap.js"></script>
</html>
Simple CRUD Operation Using AngularJS - Part 2.zip （11个子文件） 
Simple CRUD Operation Using AngularJS - Part 2 js 
bootstrap.js 67KB app.js 948B angular.js 1.18MB jquery-3.1.1.js 261KB css bootstrap.css 143KB
index.html 5KB fonts 
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.woff2 18KB资源评论
