How to add input forms dynamically in Angular JS
Question
I want to change the form inputs dynamically , and i have tried doing it using ng-bind-html , but only label is getting displayed , text box doesn't appears on the DOM. Here what has to be written inside ctrl.content depends upon the values from the server.
Note
type value will be coming from server , and it can be dynamic
HTML
<div ng-bind-html="ctrl.content">
Controller
function myCtrl(type) {
var ctrl = this;
switch (type) {
case 1:
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
break;
case 2:
ctrl.content = " <div> Input : <input type=\"textarea\" > </div> ";
break;
default:
}
Dom Element :
<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>
4 answers
solution1
3 ACCPTED 2017-05-12 11:17:53
First, your assignment is all wrong
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
You should be assigning the markup to a $scope property. eg
$scope.content = " <div> Input : <input type=\"text\" > </div> ";
Secondly you should use the $sce service to sanitize the html. Here's a plnkr where this code demonstrates the intended behavior
var app = angular.module('plunker', []);
app.controller('Ctrl', function($scope, $sce) {
$scope.name = 'World';
var ctrl = this;
$scope.click = function myCtrl(type) {
switch (type) {
case 1:
$scope.content = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
break;
case 2:
$scope.content = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
break;
default:
}
}
});
Note also that I changed your markup from input type="textarea" to a textarea element.
solution2
2 2017-05-12 11:08:05
You should use $sce service with ngSanitize module:
angular.module('app', ['ngSanitize']) .controller('MyController', ['$scope', '$sce', function($scope, $sce) { $scope.html = function(){ return $sce.trustAsHtml(`<div> Input : <input type=\\"${$scope.type == 0 ? 'text' : 'textarea'}\\" > </div>`); } }]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script> <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script> <body ng-app="app"> <div ng-controller="MyController" ng-init='type="0"'> text: <input type="radio" ng-model="type" value="0"> textarea: <input type="radio" ng-model="type" value="1"> <div ng-bind-html="html()"></div> </div> </body>
solution3
1 2017-05-12 11:09:29
A textarea can not render HTML input type like <input type=\\"textarea\\" > ..
and try with $sce .
var app = angular.module('exApp',[]); app.controller('ctrl', function($scope,$sce){ $scope.text = $sce.trustAsHtml("<div> Input : <input type=\\"text\\" > </div> "); $scope.textArea = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> "); });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="exApp" ng-controller="ctrl"> <div ng-bind-html="text"></div><br> <div ng-bind-html="textArea"></div><br> </body>
solution4
0 2017-05-12 11:01:08
Use ng-if instead of ng-bind-html.
Something like this:
<div>
<div ng-if="type===1">Input : <input type="text"></div>
<div ng-if="type===2">Input : <input type="textarea"></div>
</div>
And in your controller, you will only need to dynamically assign type either 1 or 2 as value.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.