Skip to content

Instantly share code, notes, and snippets.

@menacestudio

menacestudio/controller.js

Last active August 29, 2015 14:10
Show Gist options
  • Save menacestudio/5778976188a5a4eec02f to your computer and use it in GitHub Desktop.
Save menacestudio/5778976188a5a4eec02f to your computer and use it in GitHub Desktop.
Download ZIP
Angular using Angular directives for Bootstrap
Raw
controller.js
(function(app) {
app.controller('Ctrl', Ctrl);
app.controller('CtrlModal', CtrlModal);
//Ctrl.$inject = ['$scope', '$modal', 'dataservice'];
function Ctrl($scope, $modal, dataservice) {
var vm = this;
// This will come from a service or bootstrapped data
vm.complaints = function(){
return dataservice.getComplaints();
}();
// Add or update
vm.addUpdate = function(complaint) {
var complaintId = complaint.complaintId;
var mod = $modal.open({
controller: 'CtrlModal',
templateUrl: 'modal',
resolve: {
complaint: function() {
return complaint;
},
complaints: function(){
return vm.complaints;
}
}
});
};
}
function CtrlModal($scope, $modalInstance, dataservice, complaint) {
var vm = this;
$scope.options = {};
$scope.options.states = dataservice.getStates();
$scope.complaint = complaint;
$scope.save = function() {
console.log($scope.complaint);
$modalInstance.dismiss('cancel');
}
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}
}
})(angular.module('app'));
Raw
core.js
(function(){
angular.module('app', ['ui.bootstrap']);
})();
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js" data-semver="0.12.0" data-require="angular-ui-bootstrap@*"></script>
<link href="style.css" rel="stylesheet" />
<script src="core.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="app">
<div id="main" ng-controller="Ctrl as ctrl">
<a href="#" ng-click="ctrl.addUpdate({ complaintId: 0 })">Add New</a>
<table class="table table-striped">
<thead>
<tr><td>Actions</td><td>Name</td></tr>
</thead>
<tbody>
<tr ng-repeat="complaint in ctrl.complaints">
<td><a href="#" ng-click="ctrl.addUpdate(complaint)">Edit</a></td>
<td>{{ complaint.name }}</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="modal">
<div class="modal-header">
<h3 class="modal-title">Id: {{ complaint.complaintId }}</h3>
</div>
<div class="modal-body">
<form class="form">
<div class="row">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" ng-model="complaint.name" />
</div>
<div class="form-group">
<label for="states">States</label>
<select class="form-control" name="states" ng-options="state.name for state in options.states" ng-model="complaint.state">
<option value="">- Select One -</option>
</select>
</div>
<div class="form-group">
<label for="employees">Employees</label>
<select class="form-control" name="employees" ng-options="employee.name for employee in options.employees" ng-model="complaint.employee">
<option value="">- Select One -</option>
</select>
<a href="#" ng-click="addEmployee()">Add an Employee</a>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="isInternal" id="isInternal1" value="1" ng-model="isInternal">
Employee
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="isInternal" id="isInternal2" value="2" ng-model="isInternal">
External Employee
</label>
</div>
</div>
<div class="form-group" ng-show="isInternal=='1'">
<select name="employeeName" ng-model="employeeName">
<option value="">- Select One -</option>
</select>
</div>
<div class="form-group" ng-show="isInternal=='2'">
<input type="text" name="externalEmployeeName" class="form-control" />
<button ng-click="addExternalEmployee">Add Employee</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()">Submit</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="complaints">
</script>
</div>
</body>
</html>
Raw
services.js
(function(app){
app.factory('dataservice', function(){
return {
getComplaints: getComplaints,
getStates: getStates
};
function getComplaints(){
return [
{complaintId: 1, name: 'alexander'},
{complaintId: 2, name: 'dennis'}];
}
function getStates(){
return [
{name: 'California', value: 'CA'},
{name: 'New York', value: 'NY'}];
}
});
})(angular.module('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment