How to remove underscores using angularjs in rails? - ruby-on-rails

Question

I am working on already developed code in AngularJS with Rails.
I am having a code which prints all the workflow states like not_found, in_process, new etc;
<td>
<div class="editable-wrapper">
<a e-name="states" e-ng-options="s.id as s.name for s in workflowStates" editable-select="address.workflowState" onbeforesave="updateAddress({workflowState: $data}, address)">{{ address.workflowState | capitalise }}</a>
</div>
</td>
Now with the above code {{ address.workflowState | capitalise }}, the page is showing as In_process, New etc;
My aim is to remove the underscores and display them as In process/ in process, Not found / not found etc. (Capitalize is not essential but have to remove underscore).

Answer 1

You can create a filter and use like:
HTML:
<a e-name="states" e-ng-options="s.id as s.name for s in workflowStates" editable-select="address.workflowState" onbeforesave="updateAddress({workflowState: $data}, address)">{{address.workflowState | removeUnderscores}}</a>
Filter:
filterExample.filter('removeUnderscores', function () {
return function (text) {
var str = text.replace(/_/g, ' ');
return str
};
})
DEMO FIDDLE
Here's a One Liner
<a e-name="states" e-ng-options="s.id as s.name for s in workflowStates" editable-select="address.workflowState" onbeforesave="updateAddress({workflowState: $data}, address)">{{address.workflowState.split("_").join(" ")}}</a>
DEMO FIDDLE FOR ONE LINER

Answer 2

You can use this filter (Disclaimer: I'm the author) that does exactly what you need.
{{ address.workflowState | capitalize:'first':'_' }}
If you want to implement it by yourself it could be something like this:
angular.module('angular-capitalize-filter',[])
.filter('capitalize', function () {
return function (input) {
if (!input) {
return input;
}
// Capitalize the first letter of a sentence
var output = input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
return output.split('_').join(' ');
}
});
And then use it as:
{{ address.workflowState | capitalize }}

Answer 3

You can create your own filter for replacing _ with space as bellow
angular.module('your-module-name', [])
.filter('stateformat', function() {
return function(input) {
if(input != null && input.length > 0)
return input.replace('_', ' ');
}
});
HTML
<td>
<div class="editable-wrapper">
<a e-name="states" e-ng-options="s.id as s.name for s in workflowStates" editable-select="address.workflowState" onbeforesave="updateAddress({workflowState: $data}, address)">{{ address.workflowState | capitalise | stateformat }}</a>
</div>
</td>