StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20383038
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-12-04T18:27:23.427
FavoriteCount
0
LastActivityDate
2013-12-04T18:57:05.453
LastEditDate
2013-12-04T18:57:05.453
LastEditorUserId
120638
OwnerUserId
120638
ParentId
20368326
PostTypeId
2
Score
3
ViewCount
0
LastEditorDisplayName
text
Body
<p>Another way is to add column number to each team in the $scope.teams.</p> <p><a href="http://jsfiddle.net/dkitchen/y5UzD/4/" rel="nofollow">http://jsfiddle.net/dkitchen/y5UzD/4/</a></p> <p>This splits them into groups of 10...</p> <pre><code>function TeamListController($scope) { $scope.teams = [ { name: "apple", id: 0, isChecked: true, col:1 }, { name: "banana", id: 1, isChecked: false, col:1 }, { name: "mango", id: 2, isChecked: true, col:1 }, { name: "orange", id: 3, isChecked: true, col:1 }, { name: "pear", id: 4, isChecked: false, col:1 }, { name: "john", id: 5, isChecked: true, col:1 }, { name: "paul", id: 6, isChecked: false, col:1 }, { name: "george", id: 7, isChecked: true, col:1 }, { name: "ringo", id: 8, isChecked: true, col:1 }, { name: "roger", id: 9, isChecked: false, col:1 }, { name: "dave", id: 10, isChecked: true, col:2 }, { name: "nick", id: 11, isChecked: false, col:2 } ]; } </code></pre> <p>You can do that at the data source, or you can assign the column number later in the controller.</p> <p>For example, this bit re-groups them into 8 items per column:</p> <pre><code>var colCounter = 1; var colLimit = 8; angular.forEach($scope.teams, function(team){ if((team.id + 1) % (colLimit + 1) == 0) { colCounter++; } team.col = colCounter; }); </code></pre> <p>Then in the view, you can filter each repeater by column number:</p> <pre><code><div ng-app> <div ng-controller="TeamListController"> <div class="checkboxList"> <div id="teamCheckboxList"> <div ng-repeat="team in teams | filter: { col: 1 }"> <label> <input type="checkbox" ng-model="team.isChecked" /> <span>{{team.name }}</span> </label> </div> </div> </div> <div> <div id="teamCheckboxList1"> <div ng-repeat="team in teams | filter: { col: 2 }"> <label> <input type="checkbox" ng-model="team.isChecked" /> <span>{{team.name}}</span> </label> </div> </div> </div> </div> </code></pre> <p></p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POdynamically create two column checkbox list in angular
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USDenis M. Kitchen
UserOwnerUserId
1. USDenis M. Kitchen
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POdynamically create two column checkbox list in angular
  singulars
  PostTypePostTypeId
  PTQuestion
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
  VTAcceptedByOriginator
CommentsPostId
1. COHey, I like this solution a lot, but just wondering, what would dictate the values to decide what should be in column 2? Would that be configured from the server side before hitting the angular page?
  singulars
  PostPostId
  PO
  UserUserId
  USsksallaj
2. COSure... or if you want your data source to be unconcerned with column, this example shows the col property being added later in the controller: http://jsfiddle.net/dkitchen/y5UzD/5/ You gotta love dynamic objects.
  singulars
  PostPostId
  PO
  UserUserId
  USDenis M. Kitchen

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.