<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Bootstrap Modals</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
</body>
</html>
<div ng-controller="UserEditModalController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 ng-show="newUser">Create New User</h3>
<h3 ng-hide="newUser">Edit User: {{ username }}</h3>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="control-group">
<label class="control-label">Username:</label>
<div class="controls">
<input type="text" ng-model="username" ng-disabled="!newUser" placeholder="Username" />
</div>
</div>
<legend ng-hide="newUser">Change Password</legend>
<div class="control-group{{pwError && ' error' || ''}}">
<label class="control-label">Password:</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" ng-model="pw1" placeholder="Password" />
</div>
</div>
</div>
<div class="control-group{{pwError && ' error' || ''}}">
<label class="control-label">Repeat Password:</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" ng-model="pw2" placeholder="Password" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn pull-left" data-dismiss="modal">
<i class="icon-remove"></i> Cancel
</button>
<button type="submit" class="btn btn-primary" ng-disabled="pwError || incomplete" data-dismiss="modal">
<i class="icon-ok icon-white"></i> Save Changes
</button>
</div>
</form>
</div>
// App services
angular.module('appServices', [])
.factory('User', function($rootScope, $http) {
var userBeingEdited = null;
var userList = [
{ _id: 125 , username: 'Tom' },
{ _id: 224 , username: 'Dick' },
{ _id: 314 , username: 'Harry' },
{ _id: 451 , username: 'Bob' },
{ _id: 515 , username: 'George' },
{ _id: 653 , username: 'Sally' }
];
return {
editUser:
function(id) {
if (id == 'new') {
userBeingEdited = null;
}
else {
userBeingEdited = id;
}
$rootScope.$broadcast('user:edit');
},
getEditUser:
function() {
if (userBeingEdited) {
for (i in userList) {
if (userList[i]._id == userBeingEdited) {
return userList[i];
}
}
}
else {
return {};
}
},
getUserList:
function() {
return userList;
}
};
});
// App
angular.module('myApp', ['appServices']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: IndexController
})
.otherwise({
redirectTo: '/'
});
}]);
// Controllers
function IndexController($scope, $http, User) {
$scope.user = User;
$scope.userList = User.getUserList();
$scope.editUser = function(uid) {
$scope.user.editUser(uid);
};
}
function UserEditModalController($scope, $rootScope, $http, User) {
$scope.user = User;
$scope.newUser = false;
$scope.uid = '';
$scope.username = '';
$scope.pw1 = '';
$scope.pw2 = '';
$scope.pwError = false;
$scope.incomplete = false;
$rootScope.$on('user:edit', function() {
var editUser = User.getEditUser();
if (editUser._id) {
$scope.newUser = false;
$scope.uid = editUser._id;
$scope.username = editUser.username;
}
else {
$scope.newUser = true;
$scope.incomplete = true;
$scope.uid = '';
$scope.username = '';
}
});
$scope.$watch('pw1', function() {
if ($scope.pw1 !== $scope.pw2) {
$scope.pwError = true;
}
else {
$scope.pwError = false;
}
$scope.incompleteTest();
});
$scope.$watch('pw2', function() {
if ($scope.pw1 !== $scope.pw2) {
$scope.pwError = true;
}
else {
$scope.pwError = false;
}
$scope.incompleteTest();
});
$scope.$watch('username', function() {
$scope.incompleteTest();
});
$scope.incompleteTest = function() {
if ($scope.newUser) {
if (!$scope.username.length ||
!$scope.pw1.length ||
!$scope.pw2.length ) {
$scope.incomplete = true;
}
else {
$scope.incomplete = false;
}
}
else {
$scope.incomplete = false;
}
};
}
<div class="container" ng-controller="IndexController">
<div class="row">
<div class="span8 offset2">
<div class="hero-unit"><h1>Modal Demo</h1></div>
<button class="btn btn-success" ng-click="editUser('new')" data-toggle="modal" href="#editModal">
<i class="icon-user icon-white"></i> Create New User
</button>
<table class="table table-striped">
<thead>
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList">
<td>{{ user._id }}</td>
<td>{{ user.username }}</td>
<td>
<button class="btn btn-primary" ng-click="$parent.editUser(user._id)" data-toggle="modal" href="#editModal">
<i class="icon-pencil icon-white"></i> Edit
</button>
</td>
</tr>
</tbody>
</table>
<div class="modal hide fade" ng-include="'modal-partial.html'" id="editModal"></div>
</div>
</div>
</div>