AngularJS string replace in HTML

Question

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

anpsmn · Accepted Answer · 2015-03-13 12:00:33Z

12

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>

answered Mar 13, 2015 at 12:00

anpsmn

7,2572 gold badges31 silver badges44 bronze badges

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

3 Comments

Arulkumar Over a year ago

My actual expectation is to achieve the `regexp' in html itself, hope thats not possible to do in html.This is fine..

anpsmn Over a year ago

@Arulkumar For javascript code that is complex it is better to make a method in controller and call it from view.

Arulkumar Over a year ago

yeah, i understand the complexity. This fix is helpful.

Engineer · Accepted Answer · 2015-03-13 12:00:49Z

6

It would be much better to create a method for that purpose:

var addText = 'Attach {0}';
$scope.getButtonLabel = function(label){
  return addText.replace('{0}', label.substr(0,label.indexOf("(")));
};

And then use it in your markup:

<button>{{getButtonLabel(header.LabelName)}}</button>

DEMO

answered Mar 13, 2015 at 12:00

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Comments

U_R_Naveen UR_Naveen · Accepted Answer · 2020-02-28 11:00:59Z

4

You can create variable in component for regex.

myReg = /'/g;

and reference the variable in replace method as below

<span>{{element.configMetadata.replace(myReg , "\"")}}</span>

answered Feb 28, 2020 at 11:00

U_R_Naveen UR_Naveen

7847 silver badges8 bronze badges

Comments

V31 · Accepted Answer · 2015-03-13 12:09:43Z

Better of to create a directive to make the split and have the dynamic text be calculated inside the directive.

Code:

var myApp = angular.module('myApp', [])
    .directive('splButton', function () {
    return {
        restrict: 'E',
        scope: {
            label: '='
        },
        template: '<button>{{btnText}}</button>',
        controller: function ($scope) {
            $scope.btnText = "Attached " + $scope.label.split('(')[0];
        }
    };
})
    .controller("stringCtrl", function ($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., )'
    }];
});

Working Fiddle

Collectives™ on Stack Overflow

AngularJS string replace in HTML

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related