AngularJS 1.0rc1 jquery-ui tabs
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc1.js"></script>
ype="text/javascript" src="http://angular-ui.github.com/angular-ui/lib/angular-ui.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<div ng-app="ui">
<div ng-controller="Ctrl">
<div ui-jq="tabs" ui-options="tabConfig">
<ul>
<li><a href="#tabs-1">Details Search</a></li>
<li><a href="#tabs-2">ID Search</a></li>
</ul>
<div id="tabs-1" class="FieldContainer">
<label>Surname</label>
<input type="text" ng-model="request.Surname"/>
<label>Given name</label>
<input type="text" ng-model="request.FirstName"/>
</div>
<div id="tabs-2" class="FieldContainer">
<label>Identifier</label>
<input type="text" ng-model="request.ClientId" />
</div>
</div>
</div>
</div>
CSS
.ng-invalid { border: 1px solid red; }
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
.ui-helper-hidden { display: none;}
JavaScript
function Ctrl($scope) {
$scope.request = {};
$scope.tabConfig = {
select: function(event, ui) {
// clear fields in other tab when we switch
if(ui.index === 0) {
$scope.request.ClientId = '';
} else {
$scope.request.FirstName = '';
$scope.request.Surname = '';
}
$scope.$apply();
}
};
}