Comment ajouter dynamiquement des formulaires d'entrée dans Angular JS

Je veux changer dynamiquement les entrées de formulaire, et j'ai essayé de le faire en utilisant ng-bind-html, mais seul l'étiquette est affichée, la zone de texte n'apparaît pas sur le DOM . Ce qui doit être écrit dans ctrl.content dépend ici des valeurs du serveur.Comment ajouter dynamiquement des formulaires d'entrée dans Angular JS

Remarque

valeur de type va venir du serveur, et il peut être dynamique

HTML

<div ng-bind-html="ctrl.content">

Contrôleur

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 Élément:

<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>

Source

2017-05-12 Haris KK

qui ressemble à jQueryish .. que diriez-vous d'utiliser ng-show/hide/if/switch à la place? – tanmay

le contenu à afficher est dynamique, donc je ne pouvais pas utiliser ng-if/hide. –

Vous affectez votre contrôleur à la valeur - ne devriez-vous pas assigner le $ scope à la place? – RamblinRose

Tout d'abord, votre mission est tout faux

ctrl.content = " <div> Input : <input type=\"text\" > </div> ";

Vous devriez assignerez le balisage à une propriété de portée de $. par exemple.

$scope.content = " <div> Input : <input type=\"text\" > </div> ";

Deuxièmement, vous devez utiliser le $sce service pour assainir le html. Here's a plnkr où ce code démontre le comportement prévu

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: 
    } 
    } 
});

Notez également que j'ai changé votre balisage de input type = "textarea" à un textarea élément.

Source

2017-05-12 11:17:53 RamblinRose

Utilisez ng-if au lieu de ng-bind-html.

Quelque chose comme ceci:

<div> 
    <div ng-if="type===1">Input : <input type="text"></div> 
    <div ng-if="type===2">Input : <input type="textarea"></div> 
</div>

Et dans votre contrôleur, vous aurez seulement besoin de dynamiquement type assign 1 ou 2 en tant que valeur.

Source

2017-05-12 11:01:08

Vous devez utiliser le service avec $scengSanitize 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>

Source

2017-05-12 11:08:05

Un textarea ne peut pas rendre le type d'entrée HTML comme <input type=\"textarea\" > ..

et essayer avec $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>

Source

2017-05-12 11:09:29

Comment ajouter dynamiquement des formulaires d'entrée dans Angular JS

Répondre

Questions connexes