Question

156

AngularJS string replace in HTML

rated 0 times [ 159] [ 3] / answers: 1 / hits: 63342 / 9 Years ago, fri, march 13, 2015, 12:00:00

In my AngularJS application, I have an issue with string replace in HTML.

Expectation:

Using the same variable as section title and partial of button's label.



Submitted Forms (Form (13G), Form (12C) and etc.,)

Attach Submitted Forms



Planned Plans (Plan (13G), Plan (12C) and etc.,)

Attach Planned Plans



Defined Schemes (Scheme (13G), Scheme (12C) and etc.,)

Attach Defined Schemes



Paid Insurances (Insurance (13G), Insurance (12C) and etc.,)

Attach Paid Insurances

Scenario:

I have headerText $scope variable. It contains the LabelNames of each section:

$scope.headerText = [{

    LabelName: 'Submitted Forms (Form (13G), Form (12C) and etc.,)'

}, {

    LabelName: 'Planned Plans (Plan (16K), Plan (12C) and etc.,)'

}, {

    LabelName: 'Defined Schemes (Scheme (11H), Scheme (12C) and etc.,)'

}, {

   LabelName: 'Paid Insurances (Insurance (10G), Insurance (12C) and etc.,)'

}];

This LabelName should be the title for each section and the same LabelName need to be used for the button's label text along with the text Attach and also need to remove the text in between the brackets.

So in the HTML file, I tried the below code to achieve the result:

<div ng-repeat=header in headerText>

    <span ng-bind=header.LabelName></span>

    <br />

    <button>{{addText.replace({0}, header.LabelName).replace(/((.*))/g, '')}}</button>

    <hr />

</div>

Mean, I want to replace the content with brackets along with empty space

(Form (13G), Form (12C) and etc.,)

from

Submitted Forms (Form (13G), Form (12C) and etc.,)

and to use that in the button's label text.

I tried the regexp .replace(/((.*))/g, ''), but it is not supporting.

Is there any way to achieve this in HTML itself.

Sample Plunker

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorac

Add To Favorites

Follow

Total Points: 262

Total Questions: 82

Total Answers: 97

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alorac questions

1 Invalid Form Body in Discord.js ban command

Sat, Oct 10, 20, 00:00, 4 Years ago

1 How to change URL without refreshing the page?

Tue, Sep 22, 20, 00:00, 4 Years ago

1 How to Query a Model based on its Relation in Strapi

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How can I access react redux state in index.js file?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Alpine.js - nested components

Sun, May 17, 20, 00:00, 4 Years ago

View All

answered 9 Years ago ninaemiliaj · Accepted Answer

Move the javascript to script.js and return the value

angular.module('app', []);



function StringCtrl($scope) {



  $scope.headerText = [{

    LabelName: 'Submitted Forms (Form (13G), Form (12C) and etc.,)'

  }, {

    LabelName: 'Planned Plans (Plan (13G), Plan (12C) and etc.,)'

  }, {

    LabelName: 'Defined Schemes (Scheme (13G), Scheme (12C) and etc.,)'

  }, {

    LabelName: 'Paid Insurances (Insurance (13G), Insurance (12C) and etc.,)'

  }];



  $scope.addText = 'Attach {0}';

  $scope.getText = function(obj){

    return $scope.addText.replace({0}, obj).replace(/((.*))/g, '')

  };



}

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js></script>

<body ng-app=app ng-controller=StringCtrl>

  <div ng-repeat=header in headerText>

    <span ng-bind=header.LabelName></span>

    <br />

    <button ng-bind=getText(header.LabelName)></button>

    <hr />

  </div>

</body>