Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 11:27
    Chriztian Steinmeier
    0

    Property Editor binding using hidden input field?

    Hi all,

    I'm fiddling with a custom property editor and I'm using a component that monitors a <textarea> (or similar) for changes, and then updates a hidden <input> field (guess it's similar to what a Markdown editor or an RTE does?).

    So I'm assuming the <input> is the ng-model here; only - it's not persisted...

    Starting out, my view is just this:

    <div ng-controller="MyController">
    <custom-tag input="tagcontent"></custom-tag>
    <input id="tagcontent" type="hidden" ng-model="model.value" />
</div>

    Shouldn't this populate the <input>'s value attribute with any saved value when the editor is instantiated?

    Or does the ng-model binding not work for hidden input fields?

    /Chriztian

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 11:30
    Tim Geyssens
    0

    What happens when you chance the type to text?

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 11:31
    Tim Geyssens
    1

    Check the thread here http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value

    You cannot use double binding with hidden field. The solution is to use brackets :

    <input type="hidden" name="someData" value="{{model.value}}" />
    Copy Link
  • Ravi Motha 289 posts 499 karma points MVP 4x c-trib
    Oct 27, 2015 @ 11:40
    Ravi Motha
    0

    So the ng-model is not rebinding when the value is actually updated.. can you see the model.value being changed using the console.log???

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 11:49
    Chriztian Steinmeier
    0

    @Tim: It's already TEXT, actually. StackOverflow topic makes sense - will try the curly-brackets (though I seem to remember having tried that, but probably not correctly).

    Thanks, /Chriztian

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 12:03
    Tim Geyssens
    0

    hmm with type text it should just work with ng-model, any js errors ?

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 12:08
    Tim Geyssens
    0

    what happens if in your view you just add

    <input id="tagcontent" type="text" ng-model="model.value" />

    So no controller just the input

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 12:11
    Chriztian Steinmeier
    0

    Oh - misunderstood the initial question about setting type to text - thought you meant the valueType: key in the manifest file :-)

    Will try changing the input to text...

    Copy Link
  • Bjarne Fyrstenborg 1182 posts 3441 karma points MVP 4x c-trib
    Oct 27, 2015 @ 12:17
    Bjarne Fyrstenborg
    0

    Hi Chriztian

    I think you should be able to use ng-value attribute since AngularJS 1.2 http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value

    Does this work?

    <input id="tagcontent" type="hidden" ng-value="model.value" />

    or maybe try this for watching changes: http://blog.sapiensworks.com/post/2013/06/22/Binding-AngularJs-Model-to-Hidden-Fields.aspx/

    /Bjarne

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 12:31
    Chriztian Steinmeier
    0

    Hmm doesn't even work with the standard textfield...

    It's not saving the property (can see that using XMLDump) - so for what it's worth, the binding on initialisation could actually be working - it's just getting an empty property :-)

    /Chriztian

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 12:45
    Tim Geyssens
    0

    @CHriztian, did you try the basic text field example (so no controller)

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 12:49
    Chriztian Steinmeier
    0

    Yes - that saves the value...

    So what does that tell you?

    /Chriztian

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 12:56
    Tim Geyssens
    0

    That there is probably an issue with your controller

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 13:04
    Chriztian Steinmeier
    0

    OK, so I've got it down to this:

    • If I change the textfield manually and hit Save and Publish, it saves correctly.
    • If the value is set from script, it doesn't Save, i.e. Angular doesn't see the changes

    So looks like I'll need to checkout using the $watch() as Bjarne suggests...

    Will try the hidden input with ng-value first, since that should work ... (btw: Very confusing that there are all these subtly different approaches - using ng-model, ng-value or the value with double-braces)

    I say should work because I don't see how you'd change the value of a hidden field from other than code...

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 13:06
    Tim Geyssens
    0

    So from script you are setting the value attribute? Why not set $scope.model.value instead , since that is linked to your control it should do the binding for you...

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Oct 27, 2015 @ 13:08
    Chriztian Steinmeier
    0

    Why not set $scope.model.value instead [?]

    Because that's the component doing it for me :)

    Copy Link
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 27, 2015 @ 13:07
    Tim Geyssens
    0

    If you share the complete example I can give some pointers since I think you aren't taking full advantage of the angularjs power ;)

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies