Question

45

Replacing spaces in AngularJS

rated 0 times [ 46] [ 1] / answers: 1 / hits: 11022 / 11 Years ago, tue, february 4, 2014, 12:00:00

I am working on a tool that adds UTM parameters to URLs and I need to replace or remove the spaces in between words of the user inputs.

 <div ng-app=myApp>

                <div class=large-6 columns>

                    <label style=font-size:16px;>URL<small> required</small></label> <input type=text ng-model=data.url autofocus= placeholder=URL of your website. ex. www.widgets.com/blue-widgets>



                </div>

                <div class=large-6 columns>

                    <label style=font-size:16px;>Source<small> required</small></label> <input type=text ng-bind=?/utm= ng-model=data.source placeholder=URL they are sent from. ex. twitter.com, yelp.com, etc.>

                </div>

                <div class=large-6 columns>

                    <label style=font-size:16px;>Medium<small> required</small></label> <input type=text ng-model=data.medium placeholder=Type of content used. ex. banner_ad, newsletter, etc.>

                </div>

                <div class=large-6 columns>

                    <label style=font-size:16px;>Campaign Term</label> <input type=text ng-model=data.campaignTerm placeholder=For paid keywords>

                </div>

                <div class=large-6 columns>

                    <label style=font-size:16px;>Campaign Content</label> <input type=text ng-model=data.campaignContent placeholder=Terms used in marketing content. ex. Free vs. 20% off>

                </div>

                <div class=large-6 columns>

                    <label style=font-size:16px;>Campaign Name<small> required</small></label> <input type=text ng-model=data.campaignName placeholder=Name of the campaign. ex. End of summer promotion>

                </div>



                    <h2 ng-show=data.url style=text-align:center>

                        Your URL, sir

                    </h2>

                 <div ng-show=data.url >   

                    <textarea rows=1 ng-trim=true style=font-size:24px; text-align:center; class=panel id=selectible>{{data.url}}{{(data.source) ? '?/utm_source=' + data.source : ''}}{{(data.medium) ? '&amp;utm_medium=' + data.medium : ''}}{{(data.campaignTerm) ? '&amp;utm_term=' + data.campaignTerm : ''}}{{(data.campaignContent) ? '&amp;utm_content=' + data.campaignContent : ''}}{{(data.campaignName) ? '&amp;utm_name=' + data.campaignName : ''}}</textarea>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 11 Years ago andrewb · Accepted Answer

you can define your own directive
I wrote something similar, here is the linkfunction for the directive

function (scope, element, attrs, sokratikDialogueCtrl) {

                // Listen for change events to enable binding

                element.on('blur keyup change', function () {

                    scope.$apply(read);

                });



                // Write data to the model

                function read() {

                    var html = angular.element(element).children().html().replace(s,);



                    scope[attrs.spaceReplacedText] = html;



                }

}

I have not tested the part regarding replace. if you name your directive as spaceReplacedText

html will become

<input type =text spaceReplacedText=$variable>

for more on directives read

http://docs.angularjs.org/api/ng.$compile