I have some jQuery currently set up to remove the input field from view and write the value of the input field as plain text inside a span, however I'm wondering how AngularJS would handle this. The event happens upon submitting a form, that part is already done through ajax as well. It's not just one input, it's all of them on the form so you can see the results of what you just submitted.
2 Answers
Use ng-show and/or ng-hide on each input field and its associated text equivalent.
When you submit the form, toggle some $scope property:
<input type="text" ... ng-model='text1' ng-show="editMode">
<span ng-hide="editMode">{{text1}}</span>
In your controller, initialize editMode to true. In your submit function, set it to false.
5 Comments
Organiccat
This will hide the input, but I still want the value itself displayed as text.
Organiccat
Ah, I see what you did there
Organiccat
How would you do this for a select/option dropdown?
Mark Rajcok
Same way. Put ng-show on the
select, and an ng-hide span after it. Instead of text1, use whatever ng-model variable you specified in the select.Organiccat
There we go, I had an array so I had to identify the particular var I wanted out of it. Thanks!
Try adding any of these functions in the html where you call the .js function
<script>
$(function() {
$('#fieldName').attr("readonly","readonly");
});
</script>
OR
<script>
$(function() {
$('#fieldName').attr("readonly", true);
});
</script>
Where #fieldName is the id of the input field.
2 Comments
Organiccat
This is what I do currently with jQuery, I'm looking to do the same in AngularJS with fields that no longer have ids attached to them. Preferably all inputs at the same time too.
Javier Brooklyn
Try changing '#fieldName' to 'input'