2017-05-12 19 views
0

フォーム入力を動的に変更したいのですが、ng-bind-htmlを使用していますが、ラベルのみが表示され、DOMにはテキストボックスは表示されません。ここでは、ctrl.contentの中に書かれなければならないことは、サーバからの値に依存します。注Angular JSで入力フォームを動的に追加する方法

タイプ値は、サーバーから来るということだ

、それが動的にすることができ

HTML

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

コントローラ

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: 


    } 

ドム要素:

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

jQueryishになります。ng-show/hide/if/switchを代わりに使うのはどうですか? – tanmay

+0

表示されるコンテンツは動的なので、ng-if/hideは使用できませんでした。 –

+0

あなたはコントローラに値を割り当てています。代わりに$ scopeを割り当ててはいけませんか? – RamblinRose

答えて

3

まず、あなたの割り当ては、あなたは$スコーププロパティにマークアップを割り当てるべきであるすべて間違っ

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

です。例えば

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

第2に、$sce serviceを使用してhtmlをサニタイズする必要があります。このコードはまた、私はテキストエリア要素に入力タイプ=「テキストエリア」から、あなたのマークアップを変更することを意図した動作

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

注意を実証Here's a plnkr

0

ng-bind-htmlの代わりにng-ifを使用します。このような

何か:

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

そして、あなたのコントローラで、あなただけの値として動的アサイン・タイプ1または2のいずれかにする必要があります。

2

あなたはngSanitizeモジュールと$sceサービスを使用する必要があります。

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>

1

textarea<input type=\"textarea\" >のようなHTML入力タイプ..

をレンダリングし、$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>

関連する問題