Question

特殊文字を置き換えて文字列からHTML入力を表示したい。

HTMLコードは次のとおりです。

<h3 class="text-center" data-ng-bind-html="finalString"></h3> 

JSコードは以下のようになります。

 function convertStringToInput(){ 
      var string = ' Hi,Cricket match with !!!TEXT!!! on !!!DATE!!! Umpire is !!!TEXT!!! and price is !!!NUMBER!!! items.'; 

      var mapObj = { 
       '!!!TEXT!!!': '<input type="text" class="form-control" placeholder="Enter text" data-ng-model="text" />', 
       '!!!DATE!!!': '<input type="date" class="form-control" placeholder="date" data-ng-model="model" />', 
       '!!!NUMBER!!!': '<input type="number" class="form-control" placeholder="Enter Number" data-ng-model="number" />' 
      }; 
      string = string.replace(/!!!TEXT!!!|!!!DATE!!!|!!!NUMBER!!!/gi, function (matched) { 
       return mapObj[matched]; 
      }); 

      $scope.finalString = string; 
     } 
     convertStringToInput(); 

予想外は!!!テキスト！テキストボックスとしてのHTML入力に置き換えて、!!! DATE !!! datepickerと!!!! NUMBER！番号への入力タイプ。

Answer 1

には、例えば、ngSanitizeを追加し、HTML

XYZは、アプリケーションモジュール内のJavaScriptファイルに次に、あなたのangularjsバージョン

ある

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script> 

に含める：

angular.module('nameOfYourAppModule', ['ngSanitize']) 

その後、$のSCE依存性を注入しますコントローラにそのように追加し、$ scope.finalString = $ sce.trustAshtml（string）を追加します。さらに読書のための

.controller('myController', function(
    $scope, 
    $sce 
) { 
function convertStringToInput(){ 
      var string = ' Hi,Cricket match with !!!TEXT!!! on !!!DATE!!! Umpire is !!!TEXT!!! and price is !!!NUMBER!!! items.'; 

      var mapObj = { 
       '!!!TEXT!!!': '<input type="text" class="form-control" placeholder="Enter text" data-ng-model="text" />', 
       '!!!DATE!!!': '<input type="date" class="form-control" placeholder="date" data-ng-model="model" />', 
       '!!!NUMBER!!!': '<input type="number" class="form-control" placeholder="Enter Number" data-ng-model="number" />' 
      }; 
      string = string.replace(/!!!TEXT!!!|!!!DATE!!!|!!!NUMBER!!!/gi, function (matched) { 
       return mapObj[matched]; 
      }); 


      $scope.finalString = $sce.trustAsHtml(string); 
      console.log($scope.finalString); 
     } 
     convertStringToInput(); 
}); 

出典： https://docs.angularjs.org/api/ng/service/ $のSCE