Wie Eingangsformulare dynamisch in Angular JS hinzufügen

Ich möchte die Formulareingaben dynamisch ändern, und ich habe versucht, es mit ng-bind-html, aber nur Label wird angezeigt, Textfeld nicht auf dem DOM angezeigt . Was hier in ctrl.content geschrieben werden muss, hängt von den Werten vom Server ab.Wie Eingangsformulare dynamisch in Angular JS hinzufügen

Hinweis

Typ Wert vom Server kommen werden, und es kann

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 dynamisch sein Element:

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

Quelle

2017-05-12 Haris KK

das sieht jQueryish .. wie wäre es mit ng-show/verstecken/if/switch stattdessen? – tanmay

Der Inhalt, der angezeigt werden soll, ist dynamisch, daher konnte ich ng-if/hide nicht verwenden. –

Sie weisen Ihrem Controller den Wert zu - sollten Sie stattdessen nicht den $ scope zuweisen? – RamblinRose

Erstens ist Ihre Aufgabe alles falsch

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

Sie sollten das Markup auf eine $ scope Eigenschaft werden zuweisen. z.B.

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

Zweitens sollten Sie die $sce service verwenden, um die HTML zu sanieren. Here's a plnkr wo dieser Code das beabsichtigte Verhalten

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

Beachten Sie auch, dass ich geändert Markup von input type = "textarea" zu einem TextArea- Element zeigt.

Quelle

2017-05-12 11:17:53 RamblinRose

Verwenden Sie ng-if anstelle von ng-bind-html.

Etwas wie folgt aus:

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

Und in Ihrem Controller, werden Sie nur brauchen dynamisch assign Typ entweder 1 oder 2 als Wert.

Quelle

2017-05-12 11:01:08

Sie sollten $sce Service mit ngSanitize Modul verwenden:

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>

Quelle

2017-05-12 11:08:05

A textareaHTML input type nicht machen kann wie <input type=\"textarea\" > ..

und versuchen, mit $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>

Quelle

2017-05-12 11:09:29

Wie Eingangsformulare dynamisch in Angular JS hinzufügen

Antwort

Verwandte Themen