<div ng-switch="signedIn()">
<a ng-switch-when="false" >Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
Edit//
When $scope.signedIn is getting changed both Text1 and Text2 are visible.
So it works as intended untill you log in/log out - then for a second both Text1 and Text2 are visible.
Edit//
All answers suggesting using ng-if ng-hide/show - problem is still there.
I know that ng-if is "DOM friendly".
I understand the simplicity and readability of the switch, as well as the nesting that it provides, but I would suggest going with something more basic.
You can certainly use the ng-show/ng-hide approach that rhasarub suggested in their answer, but because you appear to be doing something regarding login, I would suggest using ng-if. The difference is that when the condition is not met, then the DOM is not rendered at all, so it cannot be inspected by a curious/knowledgeable user.
<a ng-if="!signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-if="signedIn()">Text2</a>
Problem was caused by also applying transition on border-bottom property, removing it solved problem.
You don't need ng-switch for a simple boolean value. You can use ng-show and ng-hide instead:
<a ng-hide="signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-show="signedIn()">Text2</a>
<div ng-switch-on="signedIn()">
<a ng-switch-when="false">Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
Related
After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')
I have the following angular-List (reduced the content to make it better readable):
<div ng-repeat="element in bigBlock.Elements track by $index"
class="singleBlockElement"
ng-drop="dragSource=='Block'"
ng-drop-success="To($index, $data, bigBlock)">
<div class="bbRange"> </div>
<i class="fa {{GetImage(element)}}" />
<div ng-drag="element.ElementType!=='placeholder'"
ng-drag-data="element"
ng-drag-start="Start()"
ng-drag-success="From(element,bigBlock, $index, bigBlock.$index)"
ng-drag-stop="Stop(element, bigBlock, $index, bigBlock.$index)"
class="cutOff">
{{element.Title}}
</div>
<div class="edit ng-show="GetLinkText(element, true)">
<span class="isvisible">
<i title="{{element.Present?'Präsentieren':'Nicht präsentieren'}}" class="fa fa-{{element.Present?'eye':'eye-slash'}}"></i>
</span>
{{GetLinkText(element,true)}}
</div>
</div>
This is how it looks like:
This is while dragging:
And this is how it looks like when I simply don't drop like described below:
I can now (successfully) drag & drop the two elements ("Welcome" and "Go Away") inside that block changing the order of these two.
But if I abort the drag/drop. e.g. Dragging "Welcome" and not moving it downwards or moving it to an area where I cannot drop (outside the block) the text "Welcome" disappears.
There are no errors. The drop is just not happing (as expected), but Angular seems to be unable to redisplay the text of that element. ({{element.Title}})
I event tried forcing a refresh using $apply(), but this did not change a thing (not creating an error either).
However, if I do ANYTHING on the page like clicking on an edit-button or anything else that causes an event, the date is correctly shown again.
So it looks like a refresh issue for me.
I am using ngDraggable for this (https://github.com/fatlinesofcode/ngDraggable)
(Update: Analyzing the page source in Developer Console of Chrome the text still seems to be there and even "should" be visible (display:block), so this might be more of a browser-issue (chrome) than an angular-issue)
This seems to be a pure Browser/CSS-Issue and not an Angular-Issue. I solved this by forcing the browser to refresh the parent container:
$('.mm-Right')[0].style.display = 'none';
$('.mm-Right')[0].offsetHeight;
$('.mm-Right')[0].style.display = 'block';
where my structure is
<div class='mm-Right'>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
</div>
That did solve the problem but looks like cheating for me. I would prefer that this bug not even appears instead of hiding the symptoms. So I am happy to accept any better answer for that problem.
The following is the code of mine. In this I've used ng-click instead of ng-href for some reason.
I've used ng-click like ng-click="navigateUrl('link{{$index+1}}')". In the view, the value is showing correctly like navigateUrl('link2'). But when I receive it in the controller, I am getting 'link{{$index+1}}'.
Here My confusion is that was working code. After somedays, i got the issue like this. So I've reverted the code from ng-click to ng-href. I want to know where I've made mistake and what is the reason for this issue?
<li ng-repeat="item in commonObject.itmes" ng-click="commonObject.sideBarIsCollapsed=!commonObject.sideBarIsCollapsed">
<a class="cursorPointer" ng-href="#/link{{$index+1}}" title="{{item.name}}"
ng-if="item.isSelected && item.reportId!=3">
<i class="glyph-icon icon-linecons-tv"></i>
<span> {{item.name}}</span>
</a>
</li>
In ui-sref, i need to add two states like ui-sref="form.profile.retail and form.profile.corporate" , i am not sure how to do this, i have tried using conditional operator but didnt work.
In form.html
<a ui-sref-active="active" ui-sref="form.profile.retail"><span>2</span> Login</a>
Here is the Plunker
Thanks
You can use ng-switch to determine what link to place, I cannot understand your conditional needs so I'll place only an example.
Assign a scope variable like isRetail to define when the link should be one or another:
<div ng-switch on="isRetail">
<a ui-sref-active="active" ui-sref="form.profile.retail" ng-switch-when="true">Retail</a>
<a ui-sref-active="active" ui-sref="form.profile.corporate" ng-switch-default>Corporate</a>
</div>
Try this :
ui-sref="form({retail: form.profile.retail, corporate: form.profile.corporate})"
You can see this exmaple where multiple params are being passed :
http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview
I have tried to do the following:
<accordion-heading ng-click="doSomething(); isopen=!isopen">
Should this work? or is it not possible to string there call together?
ng-click="doThis(param); doThat(param);"
I just need pointed in the right direction :-)
EDIT:
this:
ng-click="doThis(param); doThat(param);"
works as expected, I think it is:
isopen=!isopen
that is causing the problem, I realise I didn't say this initially.
I go around this by adding an extra div into the accordion heading, like this:
<accordion-heading ng-click="isopen=!isopen">
<div ng-click="showMainView()">
<i class="glyphicon" ng-class="{'glyphicon glyphicon-minus': isopen, 'glyphicon glyphicon-plus': !isopen}"></i>
{{item.model}}<br>{{item.model_engine}}
</div>
</accordion-heading>
possible !! possible !! possible !! possible !! possible
You can call multiple functions with ';'
See here
Using ng-click to call two different functions
How to add many functions in ONE ng-click?
How to use ng-click with multiple expressions?
It works:
http://plnkr.co/edit/fwSdBT3NIBrlk80aTgaB?p=preview
However be careful not to do too much logic in there. You should put the logic in the controller and only call it from the view. (isopen = !open for example doesn't belong on the view)