StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18925626
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-09-20T20:49:25.133
FavoriteCount
0
LastActivityDate
2014-02-21T23:54:53.717
LastEditDate
2014-02-21T23:54:53.717
LastEditorUserId
610317
OwnerUserId
888165
ParentId
17977869
PostTypeId
2
Score
22
ViewCount
0
LastEditorDisplayName
text
Body
<p>You can use angular to bind to the <code>filterOptions.filterText</code> variable. There's a plunker here to demonstrate: <a href="http://plnkr.co/edit/PHdBhF?p=preview" rel="noreferrer">http://plnkr.co/edit/PHdBhF?p=preview</a></p> <p>I'll post the same code below:</p> <pre><code> // main.js var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.filterOptions = { filterText: '' }; $scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.gridOptions = { data: 'myData', filterOptions: $scope.filterOptions }; }); </code></pre> <p>The above should be about identical to the plunkers on the docs page.</p> <pre><code> <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body ng-controller="MyCtrl"> <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" /> <br/> <br/> <div class="gridStyle" ng-grid="gridOptions"></div> </body> </html> </code></pre> <p>Notice <code>ng-model="filterOptions.filterText"</code> on the <code><input ...></code>. That's all it takes!</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to filter my data? (ng-grid)
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USDRaehal
UserOwnerUserId
1. USc0bra
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.