web-dev-qa-db-ja.com

HTMLでのAngularJS文字列の置換

AngularJSアプリケーションで、HTMLの文字列置換に問題があります。

期待：

セクションのタイトルおよびボタンのラベルの一部と同じ変数を使用します。

提出済みフォーム（フォーム（13G）、フォーム（12C）など）
Attach Submitted Forms
 
計画された計画（計画（13G）、計画（12C）など）
Attach Planned Plans
 
定義済みスキーム（スキーム（13G）、スキーム（12C）など）
Attach Defined Schemes
 
有料保険（保険（13G）、保険（12C）など）
Attach Paid Insurances

シナリオ：

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_

javascriptregexangularjs
9
Arulkumar

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>
10
anpsmn

そのためのメソッドを作成する方がはるかに良いでしょう：

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

そして、それをマークアップで使用します：

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

[〜＃〜] demo [〜＃〜]

4
Engineer

分割を行い、ディレクティブ内でダイナミックテキストを計算するためのディレクティブを作成する方が良いでしょう。

コード：

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

作業フィドル

3
V31