StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20676578
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2013-12-19T08:21:05.390
FavoriteCount
0
LastActivityDate
2013-12-19T16:16:10.263
LastEditDate
2013-12-19T16:16:10.263
LastEditorUserId
823172
OwnerUserId
823172
ParentId
20652777
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>I have implemented a custom select2 dropdown directive. And register the change event handler to element which directive link to. The change event of the input element will be triggered when I selected a item from dropdown list. Everything works as expected. You could try my implementation:</p> <p>Directive</p> <pre><code>.directive('ajaxSelect2',['$timeout', function($timeout){ return { restrict: 'A', link: function(scope, element, attrs){ element.select2({ width: '200px', createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} }, multiple: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: "ccc", text: 'task'}] }); element.bind("change",function(e){ scope.$apply(function(){ scope[attrs.ngModel] = e.val.toString(); }); }); } }; }]); </code></pre> <p>HTML</p> <pre><code><body ng-app="selectApp"> <div ng-controller="selectCtrl"> <span>Selcted value: {{input}}</span> <div> <input id="test2" ng-model="input" ajax-select2/> </div> </div> </body> </code></pre> <p>Here is the <a href="http://jsbin.com/eHebOti/1/edit" rel="nofollow">JSBin DEMO</a></p> <p><strong>[EDIT] For Property access problem</strong></p> <p>The ng-model of custom select2 element is "filter.foo". You want to notify the angular world that the value of ng-model have been updated by select2 dropdown filter. But you can't access the second level property like this:</p> <pre><code>scope[attrs.ngModel] = e.val; // equal to scope['filter.foo'] which is the first level property 'filter.foo' </code></pre> <p>You should access the property in this way:</p> <pre><code>var props = attrs.ngModel.split("."); if(props.length>1){ scope[props[0]][props[1]] = e.val; //[] equals to dot '.' }else{ scope[attrs.ngModel] = e.val; } </code></pre> <p><strong>Here is a <a href="http://jsfiddle.net/h4763/" rel="nofollow">jsFiddle demo</a></strong></p> <p>Hope this is helpful.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POAngular directive doesn't fire change event in ngModel
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USChickenrice
UserOwnerUserId
1. USChickenrice
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POAngular directive doesn't fire change event in ngModel
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
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.