StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
13049740
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
15
CommunityOwnedDate
CreationDate
2012-10-24T12:59:51.360
FavoriteCount
0
LastActivityDate
2017-03-25T21:40:42.520
LastEditDate
2017-03-25T21:40:42.520
LastEditorUserId
63550
OwnerUserId
135786
ParentId
13047923
PostTypeId
2
Score
771
ViewCount
0
LastEditorDisplayName
text
Body
<p>One thing to note is that ngModel is <em>required</em> for ngOptions to work... note the <code>ng-model="blah"</code> which is saying "set $scope.blah to the selected value".</p> <p>Try this:</p> <pre><code><select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select> </code></pre> <p>Here's more from AngularJS's documentation (if you haven't seen it):</p> <blockquote> <p>for array data sources:</p> <ul> <li>label for value in array</li> <li>select as label for value in array</li> <li>label group by group for value in array = select as label group by group for value in array</li> </ul> <p>for object data sources:</p> <ul> <li>label for (key , value) in object</li> <li>select as label for (key , value) in object</li> <li>label group by group for (key, value) in object</li> <li>select as label group by group for (key, value) in object</li> </ul> </blockquote> <hr> <p>For some clarification on option tag values in AngularJS:</p> <p>When you use <code>ng-options</code>, <strong>the values of option tags written out by ng-options will always be the index of the array item the option tag relates to</strong>. This is because AngularJS actually allows you to select entire objects with select controls, and not just primitive types. For example:</p> <pre class="lang-js prettyprint-override"><code>app.controller('MainCtrl', function($scope) { $scope.items = [ { id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'blah' } ]; }); </code></pre> <pre class="lang-html prettyprint-override"><code><div ng-controller="MainCtrl"> <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select> <pre>{{selectedItem | json}}</pre> </div> </code></pre> <p>The above will allow you to select an entire object into <code>$scope.selectedItem</code> directly. <strong>The point is, with AngularJS, you don't need to worry about what's in your option tag. Let AngularJS handle that; you should only care about what's in your model in your scope.</strong></p> <p><a href="http://plnkr.co/edit/SxIvt4KThWLtWvh3PnOh?p=preview" rel="noreferrer">Here is a plunker demonstrating the behavior above, and showing the HTML written out</a></p> <hr> <p>Dealing with the default option:</p> <p>There are a few things I've failed to mention above relating to the default option.</p> <p><strong>Selecting the first option and removing the empty option:</strong></p> <p>You can do this by adding a simple <code>ng-init</code> that sets the model (from <code>ng-model</code>) to the first element in the items your repeating in <code>ng-options</code>:</p> <pre><code><select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select> </code></pre> <p>Note: This could get a little crazy if <code>foo</code> happens to be initialized properly to something "falsy". In that case, you'll want to handle the initialization of <code>foo</code> in your controller, most likely.</p> <p><strong>Customizing the default option:</strong></p> <p>This is a little different; here all you need to do is add an option tag as a child of your select, with an empty value attribute, then customize its inner text:</p> <pre><code><select ng-model="foo" ng-options="item as item.name for item in items"> <option value="">Nothing selected</option> </select> </code></pre> <p>Note: In this case the "empty" option will stay there even after you select a different option. This isn't the case for the default behavior of selects under AngularJS.</p> <p><strong>A customized default option that hides after a selection is made:</strong></p> <p>If you wanted your customized default option to go away after you select a value, you can add an ng-hide attribute to your default option:</p> <pre><code><select ng-model="foo" ng-options="item as item.name for item in items"> <option value="" ng-if="foo">Select something to remove me.</option> </select> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POWorking with select using AngularJS's ng-options
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USPeter Mortensen
UserOwnerUserId
1. USBen Lesh
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POWorking with select using AngularJS's ng-options
  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
  VTAcceptedByOriginator
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

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.