In an Angular app, I have a list of hyperlinks that need to have the following behavior:
if a certain condition is present (e.g. if a certain cookie has value x), a click on the hyperlink should open a modal window;
if this condition is not met (e.g. if the cookie has value y), the hyperlink should act in its usual manner and open the link in a new tab.
The hyperlinks are formatted as follows:
<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
{{article.title}}
</a>
I am puzzled by how to implement such a behavior. If I leave both ng-href and ngclick directives, then ng-href will insert the url and every click will open a page in a new tab. If I remove the ng-href directive, then the only way to open a link in another tab will be through javascript, but this is prevented by most browsers. I couldn't think of a way to make ng-href conditional (for example, writing <a ng-href="myCondition === true ? {{article.url}} : '#'"> doesn't work).
Could you please suggest a way of how to implement such a functionality in Angular?
This worked for me
<a ng-href='{{(element.url.indexOf("#")>-1) ? element.url : element.url + "client_id="}}{{credible.current_client_info.client_id}}'>{{element.title}}</a>
Here is a bit different approach that worked for me, didn't use ng-href at all:
HTML:
<a ng-click="myFunc()">{{article.title}}</a>
Controller:
$scope.myFunc = function() {
if (myCondition){
window.open($scope.article.url,'_self',false);
}
window.open("/#/",'_self',false);
};
Here is what I came up with. It looks kind of ugly, so if you have better suggestions, they are very welcome:
I wrote two separate anchor tags with different behaviors and made Angular choose between them depending on whether or not the necessary condition is met:
<a href="#" ng-if="checkCookies() === 'show popup'" ng-click="openArticle(article)">
{{$parent.article.title}}
</a>
<a ng-href="{{$parent.article.url}}" target="_blank" ng-if="checkCookies() === 'no popup'">
{{$parent.article.title}}
</a>
And in the javascript file, I wrote the checkCookies() function that looks up the value of the particular cookie.
Related
I am trying to print the value of merchant.merchant_url for my inAppBroswer call. I have looked at the recommended javascript to parse using the A tag at the blog by Nic. https://www.thepolyglotdeveloper.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/
However, this impacts my other links on the app that I do not need to open in the InAppBrowser. Can someone please recomend how can I print this url value? I tried ng-href as well but then the opened site takes over the app and there is no way to exit.
I have also tried using ng-click as suggested here How do I open inAppBrowser using Angular JS?
But this doesn't help either. I know for a fact that merchant.merchant_url has value because i can print it outside my a href. However I having trouble getting it in single quotes for the execution. I have tested non-dynamic links and they work fine in the app. Stripped off < > for the so that the code is readable.
a class="item" href="#" onclick="window.open('{{merchant.merchant_url}}', '_blank', 'location=yes'); return false;"
View
/a
Past this code your controller:
$scope.urlOpen = function(url) {
console.log(url);
window.open(url, '_blank', 'location=yes');
};
and change in your view:
<a class="item" href="#" ng-click="urlOpen({{merchant.merchant_url}})">View </a>
Most of the code posted by xuser is ok. Except that merchant.merchant_url has to be in single quotes.
urlOpen('{{merchant.merchant_url}}')
I'm beginner with AngularJs, and i have a lot of questions :/
Here's one of them :
I have links that i use to filter data. So when i click on link one, the value for the filter myFilter is one, etc.
Just to show you that my filters work, i putted two times the links (see here http://plnkr.co/edit/2G6mahkmyIixMJ1mEVKp?p=preview)
In the above links, i use ng-swich, cause i want, when i click on a link, to remove the link and only keep the text
In the bottom links, there are no ng-swich, so myFilter works perfectly
Is it possible, to make the ng-click inside the ng-swich work ?
The way you are approaching the issue involves far too much code duplication.
Also it is a bad practice to replace objects directly in the html. If you use a function bound to the scope it is cleaner and you won't run into child scope issues as much
Rather than creating four <ul> you could simply use ng-if within each <li> and use only one <ul>. This would also be a good case to create a very simple directive
HTML
<li>
<span ng-if="myFilter.trimestre==1">Avril - juin</span>
<a ng-if="myFilter.trimestre!=1" ng-click="updateFilter('trimestre',1)" href="#">Avril - juin</a>
</li>
JS
$scope.myFilter={};
$scope.updateFilter = function(key, val){
$scope.myFilter[key]=val;
}
DEMO
I have menu filled with $http method
<ul class="nav">
<li ng-repeat="(itemIndex, item) in menuItems.menu_items">
<a ng-click="showSubmenu(itemIndex)" ng-href="{{item.link}}">{{item.title}}</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="subItem in item.submenu">
<a ng-href="{{subItem.link}}">{{subItem.title}}</a>
<span>{{subItem.desc}}</span>
</li>
</ul>
</li>
</ul>
And in controller
$scope.activeMenuIndex;
$scope.showSubmenu = function(item) {
$scope.activeParentIndex = item;
}
$scope.isShowing = function(index) {
return $scope.activeParentIndex === index;
};
Basically it works - click on menu element hides other elements and expands clicked one. The problem is when I click on opened menu element - it won't hide.
Maybe you know a better idea of the solution, than my (incomplete) way?
Greetings!
You need to add condition like this:
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
As #fliborn said, you can just put that logic in the showMenu. Or, for clarity, consider renaming showMenu(id) to toggleMenu(id) -- so it's more clear that it handles the closing case if you call it with an id that is active.
But, in either case, you'd do as #fliborn said and set the activeParentIndex to null if you toggle the id that is currently active.
From an Angular perspective, that's certainly a reasonable way to go (i.e. that's a good technical way to implement that behavior, if that's the behavior you want).
The other thing to consider is whether your approach is ideal from a UI perspective. Is it clear to your end users that they can click on the open one in order to close? If unclear, consider putting a "+" icon to the left side of all the inactive headers, and have a "-" show next to the active one (use ng-class if using glyphicons, or ng-show and ng-hide if you are just going to use text or graphics).
That way, when a user clicks to open a section, the "+" turns into a "-" as it opens up, and the user realizes that they can click on the header again to close it.
I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.
Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.
Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.
Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.
you can use this, so you can preserve the link and basically do nothing when its clicked
<a ui-sref="state" href="javascript:void(0);">Your link</a>
I use this:
<a href-void>Click me! I don't do anything, but i'm still a link!</a>
I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.