AngularJS字符串替换HTML答案

【问题标题】：AngularJS string replace in HTMLAngularJS字符串替换HTML
【发布时间】：2015-03-13 11:32:59
【问题描述】：

在我的 AngularJS 应用程序中，我遇到了 HTML 中的字符串替换问题。

期望：

使用与部分标题和部分按钮标签相同的变量。

提交的表格（表格 (13G)、表格 (12C) 等） 附上提交的表格 计划的计划（计划（13G），计划（12C）等，） 附加计划计划 定义方案（方案 (13G)、方案 (12C) 等） 附加定义的方案 付费保险（保险 (13G)、保险 (12C) 等） 附上付费保险

场景：

我有 headerText $scope 变量。它包含每个部分的LabelNames：

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

这个LabelName 应该是每个部分的标题，同样的LabelName 需要与文本Attach 一起用于按钮的标签文本，并且还需要删除括号之间的文本。

所以在 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>

意思是，我想用括号和空格替换内容
（表格（13G），表格（12C）等，）
来自
提交的表格（表格 (13G)、表格 (12C) 等）
并在按钮的标签文本中使用它。

我尝试了正则表达式.replace(/($.*$)/g, '')，但它不支持。

有没有办法在HTML 本身中实现这一点。

Sample Plunker

【问题讨论】：

标签： javascript regex angularjs

【解决方案1】：

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

【讨论】：

我的实际期望是在html本身中实现`regexp'，希望在html中是不可能的。这很好..
@Arulkumar 对于复杂的 javascript 代码，最好在控制器中创建一个方法并从视图中调用它。
是的，我了解其中的复杂性。此修复很有帮助。

【解决方案2】：

为此目的创建一个方法会更好：

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

然后在你的标记中使用它：

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

DEMO

【讨论】：

【解决方案3】：

最好创建一个指令来进行拆分并在指令内计算动态文本。

代码：

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

【讨论】：

【解决方案4】：

您可以在组件中为正则表达式创建变量。

myReg = /'/g;

并在替换方法中引用变量，如下所示

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

【讨论】：