StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAngularJS click to edit fields such as dropdown
primarykey
Id
19595134
data
AcceptedAnswerId
19641778
AnswerCount
1
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-10-25T16:35:20.627
FavoriteCount
5
LastActivityDate
2013-10-28T17:55:40.963
LastEditDate
2013-10-25T22:15:37.690
LastEditorUserId
205426
OwnerUserId
205426
ParentId
0
PostTypeId
1
Score
4
ViewCount
1538
LastEditorDisplayName
text
Body
<p>I stumbled upon this <a href="http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/" rel="nofollow">article</a> on how to build a click to edit feature for a form. The author states:</p> <blockquote> <p>What about if you wanted input type="date" or even a select? This is where you could add some extra attribute names to the directive’s scope, like fieldType, and then change some elements in the template based on that value. Or for full customisation, you could even turn off replace: true and add a compile function that wraps the necessary click to edit markup around any existing content in the page.</p> </blockquote> <p>While looking through the code I cannot seem to wrap my head around how I could manipulate the template in such a way that I could make it apply to any angular component, let alone how I can make it apply to a drop down list. Code from article below:</p> <pre><code> app.directive("clickToEdit", function() { var editorTemplate = '<div class="click-to-edit">' + '<div ng-hide="view.editorEnabled">' + '{{value}} ' + '<a ng-click="enableEditor()">Edit</a>' + '</div>' + '<div ng-show="view.editorEnabled">' + '<input ng-model="view.editableValue">' + '<a href="#" ng-click="save()">Save</a>' + ' or ' + '<a ng-click="disableEditor()">cancel</a>.' + '</div>' + '</div>'; return { restrict: "A", replace: true, template: editorTemplate, scope: { value: "=clickToEdit", }, controller: function($scope) { $scope.view = { editableValue: $scope.value, editorEnabled: false }; $scope.enableEditor = function() { $scope.view.editorEnabled = true; $scope.view.editableValue = $scope.value; }; $scope.disableEditor = function() { $scope.view.editorEnabled = false; }; $scope.save = function() { $scope.value = $scope.view.editableValue; $scope.disableEditor(); }; } }; }); </code></pre> <p>My question is, how can we extend the above code to allow for drop down edits? That is being able to change to the values that get selected.</p>
Tags
<javascript><html><angularjs>
Title
AngularJS click to edit fields such as dropdown
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USWoot4Moo
UserOwnerUserId
1. USWoot4Moo
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. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
CommentsPostId
1. COCould you provide the remaining code for the directive?
  singulars
  PostPostId
  POAngularJS click to edit fields such as dropdown
  UserUserId
  USJonathan Palumbo
2. CO@JonathanPalumbo code added
  singulars
  PostPostId
  POAngularJS click to edit fields such as dropdown
  UserUserId
  USWoot4Moo

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.