Ehsan Ehsan - 3 months ago 9
AngularJS Question

How to compile html form template to html string

I have a object like this:

$scope.item ={
fieldName:'First Name',
fieldModel:'user.firstname',
placeholder:'enter your name'
}


and I want to compile this html form template like this:

<script type="text/ng-template" id="input.html">
<div class="items form-group">
<label class="col-sm-2 control-label">
{{item.fieldName}}
</label>
<div class="col-sm-10">
<input type="text" ng-model="{{item.fieldModel}}" placeholder="{{item.placeholder}}" class="form-control">
</div>
</div>
</script>


to html string that use pure html design:

<div class="items form-group">
<label class="col-sm-2 control-label">
First Name
</label>
<div class="col-sm-10">
<input type="text" ng-model="user.firstname" placeholder="enter your name" class="form-control">
</div>
</div>

Answer

You can include your template with:

<div id="tpl-content" ng-include src="input.html"></div>

but your template should be:

<script type="text/ng-template" id="input.html">
<div class="items form-group">
    <label class="col-sm-2 control-label">
        {{item.fieldName}}
    </label>
    <div class="col-sm-10">
        <input type="text" ng-model="item.fieldModel" placeholder="{{item.placeholder}}" class="form-control">
    </div>
</div>

Comments