AngularJS, how to bind a variable to concatenation of two other bound variables?

Question

I am new to AngularJS and trying to build an AngularJS practice app, in which, the user will concatenate a url from multiple inputs, i.e. protocol, domain, path, param1, param2, param3... etc.

And the app will create a link to the url:

<a>{{protocol}}://{{domain}}{{path}}?{{param1}}&{{param2}}&{{param3}}</a>

Above url is used twice. Once on the href attribute, as well as the actual text. Now what I want to do is something like:

<a href="{{url}}">{{url}}</a>

But I am not sure where to assign url. I tried below, and it worked, but doesn't seem correct.

<a href='{{url = protocol+"://"+domain+path+"?"+param1+"&"+param2+"&"+param3}}'>{{url}}</a>

Assuming that url is used many times in the app, where would be the most appropriate place to assign url?

try using ng-init docs.angularjs.org/api/ng.directive:ngInit Also, you might wanna use ng-href instead of href. — Aditya Jain
– Aditya Jain, Commented Aug 12, 2013 at 9:53
Hello, can't you store it inside your scope with $scope.url = concanated url; and then user {{url}} inside your controller? — Yalamber
– Yalamber, Commented Aug 12, 2013 at 9:56
Hi @askkirati, but if I do that, when user changes one of the variables, url didn't get updated... $scope.url = concatenated url seemed to only happen once during init. Did I do something wrong? — haejeong87
– haejeong87, Commented Aug 12, 2013 at 10:06

Michael Low · Accepted Answer · 2013-08-30 23:01:46Z

24

You shouldn't assign scope variables in the view (the HTML) - it's only for reading them.

To make a new variable from inputs, add a ng-model to each of them and then in the controller define a method that makes a $scope variable from them e.g.

Your HTML form:

<div ng-controller="MyCtrl">

    <input type="text" ng-model="urlParts.protocol">
    <input type="text" ng-model="urlParts.domain">
    <!-- etc -->
    <a ng-href="{{makeUrl()}}">{{makeUrl()}}</a>
</div>

JS:

function MyCtrl($scope) {
    $scope.urlParts = {};
    $scope.urlParts.protocol = ""; 
    $scope.urlParts.domain = ""; 
    // etc... 
    // These values will be updated when the user types in the input boxes

    $scope.makeUrl = function() {
      return $scope.urlParts.protocol + "://" + $scope.urlParts.domain + $scope.urlParts.path + "?" + $scope.urlParts.param1 + "&" + $scope.urlParts.param2 + "&" + $scope.urlParts.param3;
    }
}

edited Aug 30, 2013 at 23:01

answered Aug 12, 2013 at 9:56

Michael Low

24.6k17 gold badges85 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavlo Over a year ago

Why have you used ng-href instead of regular href?

haejeong87 Over a year ago

Duh! that's so simple. Thank you so much!

JoeBrockhaus · Accepted Answer · 2017-01-05 04:39:25Z

1

Another similar approach is to use ng-init directive to create a dynamic property which represents the concatenation of all those properties. You can call the function or just concatenate inline.

 <a ng-init="urlParts.url=makeUrl()" 
ng-href="urlParts.url">{{urlParts.url}}
</a>

<a ng-init="urlParts.url=urlParts.protocol + '://' + $scope.urlParts.domain..." 
    ng-href="urlParts.url">{{urlParts.url}}
    </a>

Reference: http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

Try It: http://plnkr.co/edit/PSvwCE?p=info

edited Jan 5, 2017 at 4:39

JoeBrockhaus

2,8033 gold badges43 silver badges65 bronze badges

answered May 20, 2015 at 13:54

ozkary

2,7241 gold badge23 silver badges20 bronze badges

Comments

Rubi saini · Accepted Answer · 2015-10-28 10:27:01Z

0

If you want to bind a dynamic url with href then you can manipulate you URL in ng-click or ng-mousedown event and bind to target element.

JS:

var goToLinkedPage = function (event, basePath, param1, param2, param 3) {
    var newState = basePath + "?" + param1 + "&" + param2 + "&" + param3;
    jQuery(event.target).attr('href',newState);
};

HTML:

<a ng-mousedown="goToLinkedPage($event, basePath, param1, param2, param3)"> Click Here </a>

answered Oct 28, 2015 at 10:27

Rubi saini

2,53525 silver badges21 bronze badges

Comments

bairavand · Accepted Answer · 2018-08-27 12:20:02Z

0

Just use this binding expression to concatenation of more than two scope variables in HTML.

{{UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName}}

If you want to do this inside any attribute, Just write like this:

<input type="text" ng-value="UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName">

answered Aug 27, 2018 at 12:20

bairavand

3673 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS, how to bind a variable to concatenation of two other bound variables?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related