Need urgent help bootstrap/angular js


#1



Please suggest changes so that the output of my code resembles this image. Thank you.

<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->
    <title>Web Page</title>
    <!-- Bootstrap -->
	
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>


	<nav class="nav navbar-default col-xs-6 col-sm-2" id="myScrollspy">
		<div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
            </div>
            <div id="myNavbar" class="navbar-collapse collapse">
          
            <ul class="nav nav-pills nav-stacked " data-spy="affix" data-offset-top="800">
                <li><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-tower" aria-hidden="true"></span> Opportunities</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> Leads</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Tasks</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> Files</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Accounts</a></li>
                <li><a href="#"><i class="fa fa-address-card"></i>  Contacts</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboards</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Reports</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> Feed</a></li>
                <li><a href="#"><i class="fa fa-group"></i> Groups</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Calender</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> People</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Cases</a></li>
            </ul>
			</div>
			
    </nav>
	
	<nav class="navbar navbar-right col-xs-3 col-sm-3">
		
			<ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-th" aria-hidden="true"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
                <li><a href="#"><i class="fa fa-user-circle"></i></a></li>

			</ul>
    </nav>
	
	<div id="corporate" class="row row-content">
		
            <div class="col-xs-12 col-sm-offset-9 col-sm-3">
				
				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTestId">
                            <h3 class="panel-title"><span style="background-color:orange;"><span class="glyphicon glyphicon-th" style="color:white;"></span></span>Test Instance ID
                                <a role="button" data-toggle="collapse"
                                     data-parent="#accordion" href="#testid"
                                     aria-expanded="true" aria-controls="testid">
									 <span class="glyphicon glyphicon-collapse-down pull-right"></span>
                                    </a>
                            </h3>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse in"
                             id="testid"    aria-labelledby="headingTestId">
                            <div class="panel-body">
                                <p>Voice centric device behaviour during ALU MMEOverload-EMM EXTENDED SERVICE REQUEST REJECT #22, ATTACH TAU/REJECT #22, UTRAN available</p>
                            </div>
                        </div>
                    </div>
					
					<div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingHistory">
                            <h3 class="panel-title"><span style="background-color:blue;"><span class="glyphicon glyphicon-duplicate" style="color:white;"></span></span>History
                                <a role="button" data-toggle="collapse"
                                     data-parent="#accordion" href="#history"
                                     aria-expanded="true" aria-controls="history">
									 <span class="glyphicon glyphicon-collapse-down pull-right"></span>
                                    </a>
                            </h3>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse" id="history" aria-labelledby="headingHistory">
                            <div class="panel-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
					
					<div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingEC">
                            <h3 class="panel-title"><span style="background-color:brown;"><span class="glyphicon glyphicon-file" style="color:white;"></span></span>Execution Comments
                                <a role="button" data-toggle="collapse"
                                     data-parent="#accordion" href="#EC"
                                     aria-expanded="true" aria-controls="EC">
									 <span class="glyphicon glyphicon-collapse-down pull-right"></span>
                                    </a>
                            </h3>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse" id="EC" aria-labelledby="headingEC">
                            <div class="panel-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                            </div>
                        </div>
                    </div>
					
					<div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingLD">
                            <h3 class="panel-title"><span style="background-color:purple;"><span class="glyphicon glyphicon-paperclip" style="color:white;"></span></span>Linked Defects
                                <a role="button" data-toggle="collapse"
                                     data-parent="#accordion" href="#LD"
                                     aria-expanded="true" aria-controls="LD">
									 <span class="glyphicon glyphicon-collapse-down pull-right"}></span>
                                    </a>
                            </h3>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse" id="LD" aria-labelledby="headingLD">
                            <div class="panel-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                            </div>
                        </div>
                    </div>
					
					<div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingAttach">
                            <h3 class="panel-title"><span style="background-color:turquoise; height:15px;"><span class="glyphicon glyphicon-paperclip" style="color:white;"></span></span>Attachments
                                <a role="button" data-toggle="collapse"
                                     data-parent="#accordion" href="#attach"
                                     aria-expanded="true" aria-controls="attach">
									 <span class="glyphicon glyphicon-collapse-down pull-right"></span>
                                    </a>
                            </h3>
                        </div>
                        <div role="tabpanel" class="panel-collapse collapse" id="attach" aria-labelledby="headingAttach">
                            <div class="panel-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>                            </div>
                        </div>
                    </div>
			</div>
            </div>
			
			 <ul class="nav nav-tabs">
					<li><a data-toggle="tab" href="#summary">SUMMARY</a></li>
					<li class="active"><a data-toggle="tab" href="#testCases">TEST CASES</a></li>
					<li><a data-toggle="tab" href="#defects">DEFECTS</a></li>
					<li><a data-toggle="tab" href="#history">HISTORY</a></li>
			</ul>
			
			<div class="tab-content">
				<div id="summary" class="tab-pane fade">
					<h3>SUMMARY</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
				<div id="testCases" class="tab-pane fade in active">
					<div class="table-responsive col-sm-8"  ng-app="tableApp" ng-controller="tableController as tableCtrl">
					<table class="table">
						<thead><tr>
							<th>TEST ID</th> <th>TEST TYPE</th> <th>VERDICT</th> <th>STATUS</th> <th>OPERATOR</th> <th>EXECUTION DATE</th>
						</tr></thead>
						<tbody>
							<tr ng-repeat="x in tableCtrl.tests">
								<td>{{x.testId}}</td>
								<td>{{x.testType}}</td>
								<td>{{x.verdict}}</td>
								<td>{{x.status}}</td>
								<td>{{x.operator}}</td>
								<td>{{x.executionDate | date}}</td>
							</tr>
						</tbody>
					</table>
					</div>
				</div>
				<div id="defects" class="tab-pane fade">
					<h3>DEFECTS</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
				<div id="history" class="tab-pane fade">
					<h3>HISTORY</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
									minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
			</div>


       </div>
	<script>
	
	var app = angular.module('tableApp',[]);
    app.controller('tableController', function() {

		var tests=[
                         {
                           testId:'Test 7',
                           testType: 'Device Aggresion',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 7',
                           testType: 'Armed Agent',
                           verdict: 'Fail',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 8',
                           testType: 'Call Processing',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 7',
                           testType: 'Device Aggresion',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 6',
                           testType: 'Device Aggresion',
                           verdict: 'Fail',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 5',
                           testType: 'Device Aggresion',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 4',
                           testType: 'Device Aggresion',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
						{
                           testId:'Test 3',
                           testType: 'Device Aggresion',
                           verdict: 'Pass',
                           status:'Executed',
                           operator:'AT&T',
                           executionDate:'24/08/2016',
                        },
				];
	});
	</script>
</body>
</html>


#2

please help me people. :slight_smile:


#3

@dexterousme I think this project is beyond our scope. Try asking for some help with a specific piece of it that you're having trouble on.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.