helo,
today i started using ui-grid in my angular js.but its not displaying
the data in table properly.the image is shown below
<https://lh4.googleusercontent.com/-G2oZ9wzS9j8/VJkPpzPjIaI/AAAAAAAAAJY/srwZfAaneps/s1600/ui%2Bgrid.png>
my main html code is:
<html ng-app="trackApp">
<head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js";></script>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js";></script>
<link href="xeditable/css/xeditable.css" rel="stylesheet">
<script src="xeditable/js/xeditable.js"></script>
<link href="css/accordian.css" rel="stylesheet">
<script src="js/track.js"></script>
<link rel="icon" href="http://getbootstrap.com/favicon.ico";>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js";></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js";></script>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css";
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/dashboard/dashboard.css";
rel="stylesheet">
<script src="js/dropdown.js"></script>
<link rel="styleSheet" href="css/ui-grid-unstable.css"/>
<script src="js/ui-grid-unstable.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"
href="http://getbootstrap.com/examples/dashboard/#";>MyTRacker fleet
management</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="">Dashboard</a></li>
<li><a href="">Settings</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a class="active" href="#menu">Menu<span
class="sr-only">(current)</span></a></li>
<li><a href="#home">Home</a></li>
<li><a href="#vehicleRegister">Vehicle Register</a></li>
<li><a href="#distributorRegister">Distributor Register</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#driverRegister">Driver Register</a></li>
<li><a href="#driver-vehicleRegister">Driver-Vehicle
Register</a></li>
<li><a href="#truckTransit">Truck Transit</a></li>
<li><a href="#deviceManagement">Device Management</a></li>
<li><a href="#userManagement">User management</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#tyreManagement">Tyre Management</a></li>
<li><a href="#consignmentEntry">Consignment Entry</a></li>
<li class="reportButton"><a href="#"><i class="glyphicon
glyphicon-expand"></i>Reports</a></li>
<ul class="reportDrop">
<ul class="nav nav-sidebar">
<li><a href="#tyreManagement">report1</a></li>
<li><a href="#consignmentEntry">report2</a></li>
</ul>
</ul>
<li><a href="#geofence">Geofence</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2
main">
<h1 class="page-header">My Tracker fleet management</h1>
<!-- <h2 class="sub-header"></h2> -->
<ng-view></ng-view>
</div>
</body>
</html>
my controller is in track.js as below
var trackApp=angular.module("trackApp",['ngRoute','xeditable','ui.grid']);
trackApp.controller( "TrackCtrl",function($scope){
$scope.track=[
{
name:"KA02AA8641",
gender:"KAVITHA ENTERPRISE",
height:"raju",
occupation:'12:39:19 PM',
location:'chikmangalur',
clocation:'depo',
speed:'20km/h',
time:'16:42:12 PM',
power:'Battery',
status:'Running'
} ,
{
name:"KA02AD2595",
gender:"SLV",
height:"avinash",
occupation:"01:39:19 AM",
location:'chikmangalur',
clocation:'depo',
speed:'20km/h',
time:'16:42:12 PM',
power:'Battery',
status:'Running'
},
{
name:"KA02AA8641",
gender:"HIMU DISTRIBUTOR",
height:"5'11",
occupation:"00:39:23 AM",
location:'chikmangalur',
clocation:'depo',
speed:'20km/h',
time:'16:42:12 PM',
power:'Battery',
status:'Running'
},
{
name:"KA02AD2595",
gender:"DELHI FREIGHT",
height:"dinakar",
occupation:"01:39:19 PM",
location:'chikmangalur',
clocation:'depo',
speed:'20km/h',
time:'16:42:12 PM',
power:'Battery',
status:'Running'
},
{
name:"KA02AD2595",
gender:"SRI RAMA AGENCIES",
height:"manjunath",
occupation:"01:39:19 AM",
location:'chikmangalur',
clocation:'depo',
speed:'20km/h',
time:'16:42:12 PM',
power:'Battery',
status:'Running'
}
];
});
trackApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/vehicleRegister',{
templateUrl:'templates/vehicleRegister.html',
controller:'RegisterCtrl'
}).
when('/menu',{
templateUrl:'templates/menu.html',
controller:'TrackCtrl'
}).
when('/home',{
templateUrl:'templates/home.html',
controller:'TrackCtrl'
}).
when('/distributorRegister',{
templateUrl:'templates/distributorRegister.html',
controller:'RegisterCtrl'
}).
when('/driverRegister',{
templateUrl:'templates/driverRegister.html',
controller:'TrackCtrl'
}).
when('/truckTransit',{
templateUrl:'templates/truckTransit.html',
controller:'EditCtrl'
}).
when('/deviceManagement',{
templateUrl:'templates/deviceManagement.html',
controller:'TrackCtrl'
}).
when('/userManagement',{
templateUrl:'templates/userManagement.html',
controller:'RegisterCtrl'
}).
when('/tyreManagement',{
templateUrl:'templates/tyreManagement.html',
controller:'TrackCtrl'
}).
when('/consignmentEntry',{
templateUrl:'templates/consignmentEntry.html',
controller:'RegisterCtrl'
}).
when('/geofence',{
templateUrl:'templates/geofence.html',
controller:'TrackCtrl'
}).
when('/driver-vehicleRegister',{
templateUrl:'templates/driver-vehicleRegister.html',
controller:'RegisterCtrl'
})
}]);
my partial view that is menu.html is:
<div ui-grid="{ data: track }" class="grid"></div>
what could be the problem in my code????have i written any bad code???? why
the ui-grid is opaque and its covering the data from my json???
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
