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
– Nere, Commented Nov 1, 2016 at 6:32

Community · Accepted Answer · 2017-05-23 12:33:20Z

0

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.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Nov 1, 2016 at 6:27

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nere Over a year ago

How I can read all the text box in controller? ng-model="inputTextFIB[index]"

Nere Over a year ago

Ok..Thanks for the answer.

Nere Over a year ago

Can I have something like stackoverflow.com/questions/31988632/… ? is it possible?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related