如何在 Angular JS 中动态添加输入表单答案

【问题标题】：How to add input forms dynamically in Angular JS如何在 Angular JS 中动态添加输入表单
【发布时间】：2017-10-11 16:07:29
【问题描述】：

我想动态更改表单输入，并且我尝试使用 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>

【问题讨论】：

看起来像 jQueryish.. 使用 ng-show/hide/if/switch 怎么样？
要显示的内容是动态的，所以我不能使用ng-if/hide。
您正在为控制器分配值 - 您不应该分配 $scope 吗？
How can I use Angular to output dynamic form fields?的可能重复
查看我的更新答案

标签： javascript html angularjs html-sanitizing

【解决方案1】：

首先，你的作业全错了

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

还请注意，我将您的标记从 input type="textarea" 更改为 textarea 元素。

【讨论】：

【解决方案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>`);
    }
}]);

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

使用 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 分配为值。

【讨论】：