Javascript AngularJS 字符串替换在 HTML 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29031157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS string replace in HTML
提问by Arulkumar
In my AngularJSapplication, I have an issue with string replace in HTML.
在我的AngularJS应用程序中，我遇到了 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 $scopevariable. It contains the LabelNames of each section:
我有 headerText$scope变量。它包含LabelName每个部分的s：
$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 LabelNameshould be the title for each section and the same LabelNameneed to be used for the button's label text along with the text Attachand also need to remove the text in between the brackets.
这LabelName应该是每个部分的标题，同样LabelName需要与文本一起用于按钮的标签文本Attach，还需要删除括号之间的文本。
So in the HTML file, I tried the below code to achieve the result:
所以在 HTML 文件中，我尝试了下面的代码来实现结果：
<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.
意思是，我想用空空间一起替换括号中的内容
（表格（13G），表（12C）等，）
从
提交的表格（Form（13G），表（12C）等）
和使用在按钮的标签文本中。
I tried the regexp .replace(/(\(.*\))/g, ''), but it is not supporting.
我尝试了 regexp .replace(/(\(.*\))/g, '')，但它不支持。
Is there any way to achieve this in HTMLitself.
有什么方法可以实现这一点HTML。
回答by anpsmn
Move the javascript to script.js and return the value
将 javascript 移动到 script.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, '')
};
}<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>回答by Engineer
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>
回答by V31
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., )'
}];
});
回答by U_R_Naveen UR_Naveen
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>
