Question

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

期望：

使用相同的变量作为章节标题和部分按钮的标签。

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

情境：

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

$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

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

Answer 2

为此目的创建方法会好得多：

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

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

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

DEMO

Answer 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

Answer 4

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

myReg = /'/g;

并按如下所示在replace方法中引用变量

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

HTML中的AngularJS字符串替换

4 个答案: