使用媒体查询和角度更改移动设备中ng-href的值

Question

I have a button that I am trying to redirect to a different link on mobile than on desktop using angular. Right now the link looks like this:

    <a ng-href="{{ scheduler_link }}">
      Search area
    </a>

I'm not sure how to use media queries to change the value of scheduler_link on a smaller screen. How can I do this?

Answer 1

As Far as I know you can't use media queries to change the actual value tied to that href. But what you could do is have two links and have one link visible at each media query.

<a class="linkOne" ng-href="{{ scheduler_link1 }}">
  Search area
</a>
<a class="linkTwo" ng-href="{{ scheduler_link2 }}">
   Search area
</a>

@media customMedia{
    .linkOne{
        visible: none; <---------cross-reference on me on this, my css is weak
    }
    .linkTwo{
        visible: yes;
    }
}