<!doctype html>
<html ng-app="user">
<head>
<link type="text/css" rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="http://angularjs.org/css/docs.css">
<link type="text/css" rel="stylesheet" href="http://angularjs.org/css/font-awesome.css">
<style type="text/css">
.dropdown-menu .btn.btn-default.btn-sm.btn-block { width: 100%;}
.dropdown-menu .btn.btn-default.btn-sm { background-color: #fff; background-image: none; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src="user.js"></script>
</head>
<body>
<div class="container">
<h2>AngularJs</h2>
<div ng-view></div>
</div>
</body>
</html>
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
<section>
<input type="text" ng-model="search" class="search-query pull-left" placeholder="Search">
<button ng-click="open()" class="btn btn-primary pull-right"><i class="icon-white icon-plus"></i> Add new user</button>
</section>
<br/>
<table ng-table="tableParams" class="table">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, user) in users | orderByPriority | filter:search | orderBy:'name'">
<td data-title="'Name'">
<span ng-if="!user.$edit">{{user.name}}</span>
<div ng-if="user.$edit"><input class="form-control" type="text" ng-model="user.name" /></div>
</td>
<td data-title="'Text'" width="330">
<span ng-if="!user.$edit">{{user.designation}}</span>
<div ng-if="user.$edit"><input class="form-control" type="text" ng-model="user.designation" /></div>
</td>
<td data-title="'Actions'" width="200">
<a ng-if="!user.$edit" href="" class="btn btn-primary btn-xs" ng-click="open(user.$id)">Edit</a>
<a ng-if="!user.$destroy" ng-click="removeRecord(user.$id)" class="btn btn-default btn-xs">Delete</a>
<a ng-if="user.$edit" href="" class="btn btn-primary btn-xs" ng-click="save()">Save</a>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="add_user_modal">
<div class="modal-header">
<h3>User Form</h3>
</div>
<div class="modal-body">
<!--<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>-->
<form name="userForm" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input id="name" name="name" ng-model="user.name" type="text" placeholder="Name" class="input-xlarge" required="" ng-class="{error: user.name.$invalid && !user.name.$pristine}"/>
</div>
</div>
<div class="control-group" ng-class="{error: user.password.$invalid && !user.password.$pristine}">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input id="password" name="password" ng-model="user.password" type="password" placeholder="Password" class="input-xlarge" required="" />
</div>
</div>
<div class="control-group" ng-class="{error: user.dob.$invalid && !user.dob.$pristine}">
<label class="control-label" for="dob">Date Of Birth</label>
<div class="controls">
<input type="text" class="input-xlarge" datepicker-popup="yyyy-MM-dd" ng-model="user.dob" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="" date-disabled="disabled(date, mode)" ng-required="true" show-weeks="false" show-button-bar="false" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="gender">Gender</label>
<div class="controls">
<label class="radio inline" for="male">
<input type="radio" name="gender" ng-model="user.gender" id="male" value="male" checked="checked">
Male
</label>
<label class="radio inline" for="female">
<input type="radio" name="gender" ng-model="user.gender" id="female" value="female">
Female
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="country">Country</label>
<div class="controls">
<select class="input-xlarge" id="country" ng-model="user.country" ng-click="select_change($event)" ng-options="c.id as c.name for c in country_array">
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="state">State</label>
<div class="controls">
<select class="input-xlarge" id="state" ng-model="user.state" ng-options="s.id as s.name for s in filteredArray | filter:{country_id: user.country}">
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="designation">Designation</label>
<div class="controls">
<select id="designation" ng-model="user.designation" name="designation" class="input-xlarge" ng-options="opt.name as opt.name for opt in designations"></select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="tnc">Term & Condition</label>
<div class="controls">
<label class="checkbox inline" for="tnc">
<input name="tnc" id="tnc" type="checkbox" ng-model="user.tnc" required />Accept
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="save()" ng-if="user.id" ng-disabled="user.$invalid || !user.tnc" class="btn btn-primary"><i class="icon-white icon-plus"></i> Save</button>
<button ng-click="add()" type="submit" ng-if="!user.id" ng-disabled="user.$invalid || !user.tnc" class="btn btn-primary"><i class="icon-white icon-plus"></i> Add</button>
<button ng-click="cancel()" class="btn">Cancel</button>
</div>
</script>
angular.module('user', ['ngRoute', 'firebase', 'ui.bootstrap'])
.value('fbURL', 'https://angularjs-crud-modal.firebaseio.com/')
.value('user_table', 'user')
.value('country_table', 'country')
.value('state_table', 'state')
.factory('Users', function($firebase, fbURL, user_table) {
return $firebase(new Firebase(fbURL + user_table));
})
.factory('Country', function($firebase, fbURL, country_table) {
return $firebase(new Firebase(fbURL + country_table));
})
.factory('State', function($firebase, fbURL, state_table) {
return $firebase(new Firebase(fbURL + state_table));
})
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'ListCtrl',
templateUrl: 'list.html'
})
.otherwise({
redirectTo: '/'
});
})
.controller('ListCtrl', function($scope, $modal, $location, Users, Country, State, $firebase, fbURL, $routeParams, user_table, filterFilter) {
// Define valriables
$scope.alerts = []; // array of alert message objects.
$scope.users = Users;
// Remove user
$scope.removeRecord = function(userId) {
var userUrl = fbURL + user_table + '/' + userId;
$scope.user = $firebase(new Firebase(userUrl));
$scope.user.$remove()
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "User removed successfully!"
});
};
// Close alert message
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
// Modal: called by edit(userId) and Add new user
$scope.open = function(userId) {
var modalInstance = $modal.open({
templateUrl: 'add_user_modal',
controller: $scope.model,
resolve: {
id: function() {
return userId;
}
}
});
};
$scope.model = function($scope, $modalInstance, Users, Country, id, $firebase, fbURL, user_table) {
$scope.user = {};
$scope.country = Country; // result object from firebase
$scope.state = State; // result object from firebase
$scope.alerts = []; // array of alert message objects.
$scope.country_array = []; // holdes removed functioned data i.e. only result array of County obj of firebase in formate of angularjs
$scope.state_array = []; // holdes removed functioned data i.e. only result array of State obj of firebase in formate of angularjs
$scope.filteredArray = []; // holdes filterd data for dependent country-state dropdown
$scope.designations = [{
name: 'Co-owner',
value: "Co-owner"
}, {
name: 'PM',
value: "PM"
}, {
name: 'HR',
value: "HR"
}, {
name: 'Developer',
value: "Developer"
}];
// Convert firebase result object into angularjs object array all other deafault functions of firebase gets removed
$.each(angular.fromJson(angular.toJson(Country)), function(key, val) {
val.id = parseInt(key);
$scope.country_array.push(val);
});
$.each(angular.fromJson(angular.toJson(State)), function(key, val) {
val.id = parseInt(key);
$scope.state_array.push(val);
});
// Watch function for country-state dropdown
$scope.$watch("user.country", function(newValue) {
$scope.filteredArray = filterFilter($scope.state_array, newValue);
$scope.user.state = $scope.filteredArray[0].id;
if ($scope.filteredArray.length != 0 && $scope.filteredArray[0].country_id != newValue) {
$scope.user.state = $scope.filteredArray[1].id;
}
}, true);
// if clicked edit. id comes from $scope.modal->userId
if (angular.isDefined(id)) {
var userUrl = fbURL + user_table + '/' + id;
$scope.user = $firebase(new Firebase(userUrl));
$scope.user.id = id;
} else {
$scope.user.designation = $scope.designations[0].name;
$scope.user.country = $scope.country_array[0].id;
}
// close modal
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
// Add new user
$scope.add = function() {
Users.$add($scope.user)
$modalInstance.dismiss('cancel');
};
// Save edited user.
$scope.save = function() {
$scope.user.$save();
$modalInstance.dismiss('cancel');
};
};
})