AngularJS Zeichenfolge ersetzen in HTML

In meiner AngularJS Anwendung habe ich ein Problem mit Zeichenfolge in HTML ersetzen.AngularJS Zeichenfolge ersetzen in HTML

Erwartung:

die gleiche Variable als Überschrift verwenden und teilweise von Beschriftung der Schaltfläche.

 
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

Szenario:

Ich habe headertext $scope variabel. Es enthält die LabelName s jeden 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 der Titel für jeden Abschnitt sein sollte, und die gleiche LabelName Notwendigkeit für die Beschriftung der Schaltfläche Text verwendet wird zusammen mit dem Text Attach und muß auch den Text entfernen zwischen den Klammern.

So in der HTML-Datei, habe ich versucht, den Code unten um das Ergebnis zu erreichen:

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

Mittelwert, ich möchte ersetzen Sie den Inhalt mit Klammern zusammen mit dem leeren Raum
(Form (13G), Form (12C) und usw.)
von
übermittelten Formulare (Form (13G), Form (12C) und usw.)
und dass die Verwendung in der Beschriftungstext der Schaltfläche.

Ich habe versucht, die Regexp .replace(/($.*$)/g, ''), aber es unterstützt nicht.

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

Sample Plunker

Quelle

2015-03-13 Arulkumar

Bewegen Sie den Javascript script.js und geben den Wert

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>

Quelle

2015-03-13 12:00:33 anpsmn

Meine tatsächliche Erwartung ist die 'regexp‘ in html selbst, die Hoffnung, das ist nicht möglich zu tun in html.This zu erreichen, ist in Ordnung .. – Arulkumar

@Arulkumar Für Javascript Code, der komplex ist, ist es besser, eine Methode im Controller zu machen und sie aus der Sicht aufzurufen. – anpsmn

Ja, ich verstehe die Komplexität. Dieser Fix ist hilfreich. – Arulkumar

Es wäre viel besser, ein Verfahren zu diesem Zweck zu erstellen:

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

Und dann ist es in Ihrem Markup verwenden:

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

DEMO

Quelle

2015-03-13 12:00:49 Engineer

besser, eine Richtlinie zu schaffen, die Spaltung und haben die dynamischen Text zu machen, in der Richtlinie berechnet werden.

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

Quelle

2015-03-13 12:09:43 V31

AngularJS Zeichenfolge ersetzen in HTML

Antwort

Verwandte Themen