如何在Angular JS中動態地添加輸入表單

我想動態地改變表單輸入，並且我已經嘗試過使用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>

來源

2017-05-12 Haris KK

看起來jQueryish ..如何使用ng-show/hide/if/switch來代替？ – tanmay

要顯示的內容是動態的，所以我不能使用ng-if/hide。 –

您正在爲您的控制器分配值 - 您是不是應該分配$ scope？ – RamblinRose

首先，你的任務是完全錯誤的

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

你應該分配標記到$ scope屬性。例如

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

其次，您應該使用$sce service消毒html。 Here's a plnkr其中該代碼演示了預期的行爲

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

還請注意，我改變你的標記從輸入型=「文本區域」到textarea的元素。

來源

2017-05-12 11:17:53 RamblinRose

使用ng-if而不是ng-bind-html。

事情是這樣的：

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

而在你的控制器，你只需要動態分配類型1或2的值。

來源

2017-05-12 11:01:08

你應該使用$sce服務與ngSanitize模塊：

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>

來源

2017-05-12 11:08:05

一個textarea無法呈現HTML輸入型像<input type=\"textarea\" > ..

與$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>

來源

2017-05-12 11:09:29

如何在Angular JS中動態地添加輸入表單

回答

相關問題