How to convert the HTML containing input fields to label?

Question

I have a HTML file containing input fields like text,radio,checkbox and select.

If a pass this content to a function it should return the HTML containing the label replacing the input fields having the value entered in their respective input fields.

I want this to be done in either AngularJS or javascript or combination of both.

Example HTML content:

<table>
    <tr>
        <td>Temp:</td>
        <td>
            <input ng-model="bbb" />
        </td>
        <td>{{bbb}}</td>
    </tr>
</table>
<div>
    <input type="checkbox" ng-model="aaa" />Delivered</div>


function convertTheHtml (HTMLContent) { /* Some functionality will do the conversion and return x like below

<table>
    <tr>
        <td>Temp:</td>
        <td>{{nn.vs.temp}}</td>

    </tr>
</table>
<div>Delivered</div>
<!--It will be displayed only if it is checked-->

*/ $scope.output=x; }

In order to 'help,' as opposed to 'doing it all for you,' we'd need to see your own attempts. How far have you got, what went wrong? — David Thomas, Apr 11 '14 at 12:30
So, you need a function to convert one DOM fragment to another DOM fragment? — Iaroslav Karandashev, Apr 11 '14 at 12:32
A similar question but with jQuery: http://stackoverflow.com/questions/3142990/jquery-replace-inputs-with-spans — Rumplin, Apr 11 '14 at 12:38
@Rumplin I don't want to use jQuery(my situation is like that), is this can be achieved through AngularJS and javascript — surendher, Apr 11 '14 at 12:59
Can you post (an example of) the likely input to this function, and the expected output that the function should return? — David Thomas, Apr 11 '14 at 13:29
@surendher the better way would be to use Label It will show the semantics of your form. — Iaroslav Karandashev, Apr 11 '14 at 18:01
@DavidThomas, Yarix, Rumplin Thank you guys for sharing your views, please see the updated question — surendher, Apr 15 '14 at 06:00
You need to be more clear about what it is you're trying to do. — btm1, Apr 22 '14 at 15:25

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

There is a lot to be learned from the most up-voted angular question on stack overflow: "Thinking in AngularJS" if I have a jQuery background? The quote that is most applicable to your question comes from Mark Rajcok's answer:

In jQuery, selectors are used to find DOM elements and then bind/register event handlers to them. When an event triggers, that (imperative) code executes to update/change the DOM.

In AngularJS, you want to think about views rather than DOM elements... Views are tied to models (via scopes). Views are a projection of the model. Events change models (that is, data, scope properties), and the views that project those models update "automatically."

In AngularJS, think about models, rather than jQuery-selected DOM elements that hold your data. Think about views as projections of those models, rather than registering callbacks to manipulate what the user sees.

Rather than write a function to replace html inputs with labels, I will offer some alternatives that have the same effect, in an angular way.

1. Use ng-if to toggle inputs and labels:

<table>
  <tr>
    <td>Temp:</td>
    <td ng-if="!aaa">
      <input ng-model="bbb" />
    </td>
    <td ng-if="!aaa">{{bbb}}</td>
    <td ng-if="aaa">{{nn.vs.temp}}</td>
  </tr>
</table>

2. Use ng-include to display different templates:

<div ng-if="aaa" ng-include="'readonly.html'"></div>
<div ng-if="!aaa" ng-include="'update.html'"></div>

3. Use a directive to conditionally construct the elements:

app.directive('updateToggle', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      editvalue: '=',
      readvalue: '=',
      delivered: '='
    },
    template: '<td>\
      <span ng-show="!delivered">\
        <input ng-model="editvalue"> {{editvalue}}\
      </span>\
      <span ng-show="delivered">\
        {{readvalue}}\
      </span>\
      </td>'
  }
});
...
<td>Temp:</td>
<td update-toggle delivered="status.aaa" readvalue="nn.vs.temp" editvalue="data.bbb"></td>

I think you will find that strategies like this are more flexible than trying to parse and reconstruct html snippets in a function. What if the input was a textarea, a list of radio buttons, an editable div, a drop-down list with multiple options, or even a custom directive? With the angular approach, these are all equally easy to switch out for something else.

Here is a demo: http://plnkr.co/edit/BHukpPrcauZn9OI9DMRs?p=preview

score 0 · Answer 2 · answered Apr 16 '14 at 11:00

It's not easy to understand really well your problem, but i thought you're trying to change dinamically a html content with a checkbox button, is it right? If it's so you can bind a function to your checkbox with ng-change(), with this method you can write a function that when the cehckbox change the html content change with it.

score 0 · Answer 3 · answered Apr 23 '14 at 01:52

From what I understand you want to submit a form and get back a view, pretty match the same but as text. If I'm right. Processing directly your html is fusible but serialising - deserialising your data is more practical and for many reasons proper.

The first thing you should understand is what a form represents is a set of data, that data can be represented as a json or a Javascript object. What Angular actually is passing around is that object. The processing of that data from the form to any kind of machine readable data is can be called serialisation of the form. The other way around deserialisation.

To achieve this in Angular you need at least a controller and a view or two views. Your Controller is going to hold your serialised data, Your views or directives going to process that serialised data and provide you with a more human friendly representation, A form for data input in your case and a view that renders that data. I'm not going to cover Directives because is more advanced from what you are looking for.

Controller

angular.module('angularApp', []);     

 angular.module('angularApp')
  .controller('formController' , function($scope) {

  $scope.form = {};

  $scope.parameters = {
    editable:true
  }

});

Form View

<div ng-app="angularApp">
  <div ng-controller="formController">
    <form ng-show="parameters.editable">
        <input ng-model="form.field_a" />
        <input ng-model="form.field_b" />
        <input ng-model="form.field_c" />
        <div>
            <input type="radio" ng-model="form.radio_a" value="a" />
            <input type="radio" ng-model="form.radio_a" value="b" />
            <input type="radio" ng-model="form.radio_a" value="c" />
        </div>
    </form>
    <table ng-hide="parameters.editable">
        <tr ng-repeat="field in form">
            <td>{{field}}</td>
        </tr>
    </table>
    <input type="checkbox" ng-model="parameters.editable" />
  </div>
</div>

Demo here

There are probably even neater ways of doing that but this one seems that is doing what you are asking for. What's important in the end of the day is your serialised data. You should always transfer serialised data and deserialise that data into views, forms, whatever.

How to convert the HTML containing input fields to label?

3 Answers3

Controller

Form View