<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
<script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="roleController.js"></script>
</head>
<body ng-controller="RoleCtrl">
<div class="section">
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-10"></div>
</div>
<!-- /.row -->
<div class="panel panel-primary">
<div class="panel-heading">
<button class="btn-primary" ng-click="add()">
<i class="icon-plus"></i>
</button>
</div>
<div class="panel-body">
<div class="row">
<!--{{roles}}-->
<table class="table">
<thead>
<tr>
<th>Role</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in roles">
<td>{{item.roleName}}</td>
<td>
<a href="" ng-click="edit(item)">
Edit
</a>
</td>
<td>
<a href="" ng-click="delete(item)">
X
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.panel-->
</div>
<!-- /.container -->
</div>
<!-- /.section -->
<script type="text/ng-template" id="myModalContent.html">
<div class="wrapper" id="editModal">
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<form novalidate>
<fieldset>
<div class="container">
<div class="fleft">
<label for="name">Role: </label>
<input type="text" ng-model="currentItem.roleName" required />
</div>
<div>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1" placeholder="Enter your address" />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn" ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary" ng-click="modalOptions.ok()">{{modalOptions.actionButtonText}}</button>
</div>
</div><!-- /wrapper -->
</script>
</body>
</html>
/* Styles go here */
var app = angular.module(
"myApp",
[
'ui.bootstrap'
]);
app.controller('RoleCtrl', ['$scope', 'Modal',
function ($scope, Modal) {
$scope.roles = [{roleId:1, roleName:'User'}, {roleId:2, roleName:'Admin'}];
$scope.editItem = null;
$scope.details1='';
$scope.setCurrentItem = function (item) {
$scope.currentItem = item;
};
$scope.edit = function (item) { //editing item
$scope.setCurrentItem(angular.copy(item));
//$scope.editItem = item;
openEditModal();
};
$scope.geolocate = function () {
if ($scope.details1 !== undefined) {
var place = $scope.details1;
if (place !== "") {
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
//if (componentForm[addressType]) {
var val = place.address_components[i]; //[componentForm[addressType]];
console.log(val);
//document.getElementById(addressType).value = val;
//}
}
}
}
};
function openEditModal() {
console.log("modal opened!");
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Save role',
headerText: 'Edit role',
bodyText: '',
scope:$scope
};
Modal.showModal({ templateUrl: 'myModalContent.html', size: 'lg' }, modalOptions).then(function (result) {
console.log("save!");
});
}
}]);
app.service('Modal', ['$modal',
function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: '/modals/modal1.html',
size: 'sm'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(angular.extend(tempModalDefaults, customModalOptions)).result;
};
}]);
app.directive('ngAutocomplete', function ($parse) {
return {
scope: {
details: '=',
ngAutocomplete: '=',
options: '='
},
link: function (scope, element, attrs, model) {
//options for autocomplete
var opts;
//convert options provided to opts
var initOpts = function () {
opts = {};
if (scope.options) {
if (scope.options.types) {
opts.types = [];
opts.types.push(scope.options.types);
}
if (scope.options.bounds) {
opts.bounds = scope.options.bounds;
}
if (scope.options.country) {
opts.componentRestrictions = {
country: scope.options.country
}
}
}
}
initOpts();
//create new autocomplete
//reinitializes on every change of the options provided
var newAutocomplete = function () {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function () {
scope.$apply(function () {
// if (scope.details) {
scope.details = scope.gPlace.getPlace();
// }
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete();
//watch options provided to directive
scope.watchOptions = function () {
return scope.options;
};
scope.$watch(scope.watchOptions, function () {
initOpts();
newAutocomplete();
element[0].value = '';
scope.ngAutocomplete = element.val();
}, true);
}
};
});