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>
Related
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.
I am trying to build a star ranking purely in an angular template file without using controllers, I have the following code which fails, I can build this using controllers (calling setRanking method ng-click) but I want to understand why the following code is not working. User should be able to click on a star and all the stars up to the selected star should be highlighted.
<div class="item" ng-init="user_rating = 0">
<i
ng-repeat="star in [1,2,3,4,5]"
ng-class="(star>user_rating) && 'ion-ios-star-outline' || 'ion-ios-star'"
ng-click="user_rating = star"></i>
<h3>Starts: {{user_rating}} </h3>
</div>
I think the issue is with the scope of the user_rating(as it is not getting updated).
As each ng-repeat creates the isolated scope, so the way you are updating user_rating is creating a local copy of user_rating associated to the local scope of each ng-repeat.
To fix it you can replace the code
ng-init="user_rating = 0"
with
ng-init="r={}; r.user_rating = 0;"
Also refer user_rating with r.user_rating wherever you are referring user_rating.
Also the correct way of using ng-class is what #Shailendra mentioned in his answer. Thanks!
You need to make changes in this code for 'ng-class' as like below-
<div class="item" ng-init="user_rating = 0">
<i
ng-repeat="star in [1,2,3,4,5]"
ng-class="star>user_rating? 'ion-ios-star-outline': 'ion-ios-star'"
ng-click="$parent.user_rating=star;"></i>
<h3>Starts: {{user_rating}} </h3>
</div>
I Hope this may help you..
<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>
So I'm starting to break into AngularJS from a JavaScript (& jQuery) background. I've been wading through the tutorial, and an loving the way it's set up. Currently I'm looking at lesson 10 and I can't figure out why a piece of the code works. I have tried googling and poking through the documentation...the protractor docs don't even seem to have anything for by.css and I couldn't figure out how to search for this very concisely :/ ... Apologies if I'm just missing something seriously obvious.
In the e2e test scenario there is this code:
it('should swap main image if a thumbnail image is clicked on', function() {
element(by.css('.phone-thumbs li:nth-child(3) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
element(by.css('.phone-thumbs li:nth-child(1) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
});
which acts on this page-html:
<ul class="phone-thumbs ng-scope">
<li ng-repeat="img in phone.images" class="ng-scope">
<img ng-src="img/phones/nexus-s.0.jpg" ng-click="setImage(img)" src="img/phones/nexus-s.0.jpg">
</li>
</ul>
produced by this ng-markup:
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
I can't figure out why the element(by.css('img.phone'))... is functional. Based on the selector (and coming from jQuery) I would expect to see a 'phone' class on the images...but it's not there. Does the '.phone' reference something else?
I can see that removing the '.phone' portion gives '.....warning: more than one element found for locator By.cssSelector("img") - you may need to be more specific', so how is '.phone' providing that specificity?
Thanks,
Ben
You're just looking in the wrong place:
It is checking if clicking on a thumbnail
//app/partials/phone-detail.html (line 9):
<img ng-src="{{img}}" ng-click="setImage(img)">
makes THIS image:
//app/partials/phone-detail.html (line 1):
<img ng-src="{{mainImageUrl}}" class="phone">
change it's source. img.phone is exactly what you would expect.
The docs for by.css are here: https://github.com/angular/protractor/blob/master/docs/locators.md
I am using angular ui drop down element
<div class="dropdown" >
<a ng-click="getTypes();" dropdown-toggle> Add a Type</a>
<ul class="dropdown-menu">
<li ng-repeat="type in Types"><a><b>{{type.sType }}:</b><em>{{type.sDescription}}</em></a> </li>
</ul>
</div>
all that i do is call a web service and populate Types all works fine! But when i add the above code in my htm the div below it starts throwing the exception of max digest reached.
the div below the drop down code(as written above) simply consists of few editable segments with icons and their visibility is controlled by ng-show and ng-hide when the use click a button
say on click of 1st segment i set a variable to true by using ng-click and depending on this variable i show or hide segments by using ng-show and ng-hide
so my doubt is that without the drop down code written above my ng-show and ng-hide work completely fine but the moment i try to use the drop down directive of angular ui i start getting this exception when i click on the buttons . please help.
Edit below is the code which follows basically user clicks on icons to reorder the elements that are appearing in the ng-repeat list and from the drop down which is above the user can add elements to this list
<ul class="repeatList text-center">
<li ng-repeat="widgets in leftWidgets" widget widgets="widgets"
class="wArea">
<a href="" class="icon-remove-circle pull-right" ng-show="editMode" ng-click="deleteWidget(leftWidgets);"
title="Delete Widget">
</a>
<a href="" class="icon-chevron-up slideUpIcon" ng-click="shiftUp(widgets,leftWidgets);"
ng-show="editMode">
</a >
<a href="" class="icon-chevron-down slideDownIcon" ng-click="shiftDown(widgets,leftWidgets);"
ng-show="editMode">
</a>
</li>
</ul>
kept doing hit and trial and found that using empty anchor tags was causing the problem. i.e. i had attached ng-click events to
text //empty href
the moment i changed them to span all worked fine! dont know why the empty "a" tags caused the problem but it will be great if any one can shed some light on the reasons for the above run time angular js exception. the link below is a useful
How to Troubleshoot Angular "10 $digest() iterations reached" Error
thanks!