AngularJS string replace in HTML

In meinem AngularJS Anwendung, ich habe ein Problem mit string-replace in HTML.

Erwartung:

Unter Verwendung der gleichen Variablen wie im Abschnitt Titel und teilweise der Schaltfläche label.

Formulare (Form (13G), Form (12C) und usw.) 
Anhängen Formulare 

Geplante Pläne (Plan (13G), Plan (12C) und usw.) 
Anhängen Geplant-Pläne 

Den vorgegebenen Schemas (Schema (13G), Schema (12C) und usw.) 
Befestigen Sie den Vorgegebenen Schemata 

Bezahlte Versicherungen (Insurance (13G), Versicherung (12C) und usw.) 
Anhängen Bezahlte Versicherungen

Szenario:

Habe ich headerText $scope variable. Es enthält die LabelNames in jedem Abschnitt:

$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.,)'
}];

Diese LabelName sollte der Titel für jeden Abschnitt und die gleichen LabelName müssen verwendet werden, für die Beschriftung der Schaltfläche text zusammen mit dem text Attach und auch müssen, entfernen Sie den text zwischen den Klammern.

Also in der HTML-Datei, ich habe versucht, den code unten zu erreichen, das Ergebnis:

<div ng-repeat="header in headerText">
    <span ng-bind="header.LabelName"></span>
    <br />
    <button>{{addText.replace("{0}", header.LabelName).replace(/(\(.*\))/g, '')}}</button>
    <hr />
</div>

Meine, ich will den Inhalt ersetzen mit Klammern zusammen mit dem leeren Raum

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

aus

Formulare (Form (13G), Form (12C) und etc.,)

und zu verwenden, die in die Beschriftung der Schaltfläche text.

Versuchte ich die regexp .replace(/($.*$)/g, ''), aber es ist nicht zu unterstützen.

Gibt es eine Möglichkeit, dies zu erreichen in HTML selbst.

Beispiel Plunker

InformationsquelleAutor Arulkumar | 2015-03-13

Verschieben der javascript-Code script.js und geben den Wert zurück

JS:

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, '')
  };

}

HTML:

<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>

Meine eigentliche Erwartung ist, zu erreichen, die `regexp' in html selbst, hoffe, das ist nicht möglich in html.Das ist in Ordnung..
Für javascript-code, der Komplex ist, ist es besser, eine Methode im controller und rufen Sie aus dem Blickfeld.
ja, verstehe ich die Komplexität. Dieses Update ist hilfreich.

InformationsquelleAutor anpsmn

Wäre es viel besser, um eine Methode zu erstellen, die für diesen Zweck:

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

Und dann verwenden Sie es in Ihrem markup:

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

DEMO

InformationsquelleAutor Engineer

Besser zum erstellen einer Richtlinie, um den split und die dynamischen text berechnet werden, innerhalb der Richtlinie.

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., )'
    }];
});

Arbeiten Geige

InformationsquelleAutor V31

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.