Angular JS href generated

Question

using angularjs (+ionic) I'm trying to do this:

<ion-item menu-close ng-repeat="button in MenuButtons" {{button.type}}={{button.link}}>

the result I would expect is:

<ion-item menu-close ng-repeat="button in MenuButtons" href="mypage.html">

instead I get:

<ion-item menu-close="" ng-repeat="button in MenuButtons" {{button.type}}="{{button.link}}" class="item ng-binding" style="">

My problem is with {{button.type}}={{button.link}}
That said the following is working for me just fine where the link is "mypage.html":

href={{button.link}} --> href="mypage.html"

what am I missing?

angular doesn't create attributes , it only interprets existing ones. — charlietfl
– charlietfl, Commented Oct 28, 2015 at 0:30

Nam Pham · Accepted Answer · 2015-10-28 00:42:37Z

1

You can't bind attribute name through {{}} Angular expression. Instead try this with ng-href:

<ion-item ng-href="{{pageName}}.html"></ion-item>

More details at this Angular ng-href article

answered Oct 28, 2015 at 0:42

Nam Pham

1,22413 silver badges39 bronze badges

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

Comments

ahmetugurbulut · Accepted Answer · 2015-10-28 06:25:30Z

0

I'm not sure but you can try to write init function and do this javascriptly. (Please check to getElementById and setAttribute. There must be another way.)

<ion-item menu-close ng-repeat="button in MenuButtons" id="{{button.id}}" ng-init="createHref(button)">

$scope.createHref= function(btn){
    document.getElementById(btn.id).setAttribute(btn.type,btn.link);
}

answered Oct 28, 2015 at 6:25

ahmetugurbulut

1,60911 silver badges25 bronze badges

Comments

user4761235 · Accepted Answer · 2015-10-29 01:54:04Z

0

thanks for the feedback! based on your answer I decided to use ng-if since I may or may not have a href. so my code looks like this now

        <span ng-repeat="button in MenuButtons">
        <span ng-if="button.type === 'href'">
            <ion-item menu-close href={{button.link}}>
                <i class={{button.class}}></i> {{button.name}}
        </span>

answered Oct 29, 2015 at 1:54

user4761235

Collectives™ on Stack Overflow

Angular JS href generated

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related