我想动态更改表单输入,我尝试使用ng-bind-html,但只显示标签,文本框不会出现在DOM上。这里必须在ctrl.content中写入的内容取决于服务器的值。
请注意
类型值将来自服务器,它可以是动态的
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:
}
Dom元素:
<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>
答案 0 :(得分:3)
首先,你的作业是错误的
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
您应该将标记分配给$ scope属性。 e.g。
$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:
}
}
});
另请注意,我将标记从输入类型=&#34; textarea&#34; 更改为 textarea 元素。
答案 1 :(得分:2)
您应该使用$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>`);
}
}]);
&#13;
<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>
&#13;
答案 2 :(得分:1)
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> ");
});
&#13;
<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>
&#13;
答案 3 :(得分:0)
使用ng-if代替ng-bind-html。
这样的事情:
XML
在您的控制器中,您只需动态将类型1或2分配为值。