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

回答

相關問題