Stringa AngularJS sostituita in HTML

Nell'applicazione AngularJS, ho un problema con la sostituzione delle stringhe in HTML.Stringa AngularJS sostituita in HTML

aspettativa:

Utilizzando la stessa variabile come titolo di sezione e parziale dell'etichetta del pulsante.

 
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:

ho headerText $scope variabile. Esso contiene le LabelName s di ogni sezione:

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

Questo LabelName dovrebbe essere il titolo per ogni sezione e la stessa LabelName devono essere utilizzati per il testo etichetta del pulsante con il testo Attach e anche bisogno di rimuovere il testo tra le parentesi.

Così nel file HTML, ho provato il codice qui sotto per ottenere il risultato:

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

dire, io voglio sostituire il contenuto con le staffe insieme con lo spazio vuoto
(Form (13G), Form (12C), ecc,)
da
moduli inviati (Form (13G), Form (12C), ecc,)
e da usare che in testo dell'etichetta del pulsante.

Ho provato il regexp .replace(/($.*$)/g, ''), ma non supporta.

Esiste un modo per ottenere ciò nello stesso HTML.

Sample Plunker

fonte

2015-03-13 Arulkumar

Spostare il javascript per script.js e restituire il valore

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>

fonte

2015-03-13 12:00:33 anpsmn

La mia aspettativa attuale è quello di raggiungere il 'regexp' in html per sé, questo è la speranza non è possibile fare in html.This va bene .. – Arulkumar

@Arulkumar Per javascript codice complesso che è meglio creare un metodo nel controller e chiamarlo dalla vista. – anpsmn

sì, capisco la complessità. Questa correzione è utile. – Arulkumar

Sarebbe molto meglio creare un metodo a tal fine:

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

E poi utilizzare nel vostro markup:

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

DEMO

fonte

2015-03-13 12:00:49 Engineer

Meglio di creare una direttiva per rendere la scissione e hanno il testo dinamico calcolato all'interno della direttiva.

Codice:

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

fonte

2015-03-13 12:09:43 V31

Stringa AngularJS sostituita in HTML

risposta

Problemi correlati