Find multiple ### and replace with multiple textbox(s) in angular js

Question

I have this input raw data:

`###` train should I take to get to Kuala `###`, please?

And need to convert ### to textbox in index way.

How I can do that? My expected output would be:

<input type="text" ng-model="inputTextFIB[index]" class="input-textbox-fill-in-the-blank ng-pristine ng-untouched ng-valid ng-empty"> train should I take to get to Kuala <input type="text" ng-model="inputTextFIB[index]" class="input-textbox-fill-in-the-blank ng-pristine ng-untouched ng-valid ng-empty">, please?

Note:

inputTextFIB[index]:- index created with how many ### found.

Thanks for any help.

That was just sample...index created with how many `###` found. — Nere, Nov 01 '16 at 06:32

score 0 · Accepted Answer · edited May 23 '17 at 12:33

angular
  .module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'myTest Page';
  })
  .controller('testController', ['$scope', '$sce',
    function($scope, $sce) {
      var counter = 0;
      $scope.myName = '### train should I take to get to Kuala ###, please?';
      var count = ($scope.myName.match(/###/g) || []).length;

      $scope.myName = $sce.trustAsHtml($scope.myName.replace(/###/g, function(x) {
        counter = counter + 1;
        return '<input type="text" ng-model="inputTextFIB' + counter + '" class="input-textbox-fill-in-the-blank ng-pristine ng-untouched ng-valid ng-empty">'
      }));

      $scope.call = function(value) {
        alert(value);
      }
    }
  ]).directive('compileTemplate', function($compile, $parse) {
    return {
      link: function(scope, element, attr) {
        var parsed = $parse(attr.ngBindHtml);

        function getStringValue() {
          return (parsed(scope) || '').toString();
        }

        //Recompile if the template changes
        scope.$watch(getStringValue, function() {
          $compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
        });
      }
    }
  });

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">
  <button ng-click="call(inputTextFIB2)">get</button>
  <p ng-bind-html="myName" compile-template></p>
</body>

</html>

Thanks to call function inside $sce.trustAsHtml() string in Angular js for directive.

How I can read all the text box in controller? `ng-model="inputTextFIB[index]"` — Nere, Nov 01 '16 at 06:29
Can I have something like http://stackoverflow.com/questions/31988632/ng-model-is-undefined-in-controller ? is it possible? — Nere, Nov 01 '16 at 09:32

Find multiple ### and replace with multiple textbox(s) in angular js

1 Answers1