<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - range input</title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
</style>
<script>
angular.module('myApp', ['ui.bootstrap'])
.controller('myCtrl', ['$scope',
function($scope) {
$scope.rows = [1,2,3,4,5,6,7,8,9];
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
}
]);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl">
<h1>angular bootstrap dropdown in a table cell <a href="http://stackoverflow.com/questions/25360727">http://stackoverflow.com/questions/25360727</a></h1>
<br />
<br />
<br />
<div class="row">
<div class="col-xs-12">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row}}</td>
<td>Name</td>
<td>
<!-- Split button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>