AngularJS字符串替换为HTML

在我的AngularJS应用程序中，我遇到了HTML中的字符串替换问题。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 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.,)' 
}];

这LabelName应该是用于与文本Attach沿按钮的标签文字标题每一部分和相同LabelName需求，同时还需要删除文本在括号之间。

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

来源

2015-03-13 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>

来源

2015-03-13 12:00:33 anpsmn

我实际的期望是实现HTML本身的'正则表达式”，这就是希望不可能在html.This做的是很好.. – Arulkumar 2015-03-13 13:07:50

@Arulkumar为Javascript代码很复杂，最好在控制器中创建一个方法并从视图中调用它。 – anpsmn 2015-03-13 13:16:38

是的，我了解复杂性。此修补程序很有帮助。 – Arulkumar 2015-03-13 13:23:33

这将是最好创建用于该目的的方法：

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

，然后用它在你的标记：

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

DEMO

来源

2015-03-13 12:00:49 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.,)' 
    }]; 
});

Working Fiddle

来源

2015-03-13 12:09:43 V31

AngularJS字符串替换为HTML

回答

相关问题