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
Related
I am trying to use ng-repeat to spit out part of a url (my.url) within ng-include. Unfortunately I cant seem to get it to work. It works when I dont place it within an ng-include, so I know that part isnt the issue. THe issue seems to be when I place {{my.url}} inside ng-repeat and attached to the first (static) part of the url.
What i am aiming for is the ng-include to use "filepath/filepath/mypage.html
my.url is the mypage.html bit.
Anybody able to advise?
<uib-tab ng-repeat="stuff in myList" heading="{{my.text}}" class="sg-tabbed-titles">
<div class="tab">
<ul class="tabbed-list">
<li class="tab-content">
<div ng-include="'\filepath/filepath/{{my.url}}\'"></div>
</li>
It should be
<div ng-include="'filepath/filepath/' + my.url"></div>
ngInclude takes expression. It means that you need to use normal string concatenation just like you would do in regular javascript code.
In a test case I would like to compare the text of an anchor with an expected one, but the anchor also contains i tags. Does anybody have a hint on how to do it?
E.g. (how to get the name of the selected language):
<a class="dropdown-button btn" href="#" data-activates="languageDropdown">
<i class="material-icons">language</i>
{{selectedLanguage.name}}
<i class="material-icons">arrow_drop_down</i>
</a>
In this case, select it by Angular binding, and then you can forget about the DOM entirely:
expect(element(by.binding('selectedLanguage.name')).getText()).toBe('Expected Language');
I really like the by.binding() approach presented by #SkinnyJ. Alternatively options:
element(by.css('a.dropdown-button'))
element(by.css('a[data-activates=languageDropdown]'))
<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>
i need different classes to be used for each iteration, following code.
Edit: the index is within the li
<li class="table-view-cell bg_{{$index}}" ng-repeat="agenda in agendas">
<span class="cell">
<a data-href="#/agendas/{{agenda.id}}" ng-click="detail($event, agenda.id)">
<span class="type">{{agenda.date}}</span>
</a>
</span>
</li>
also Why do we need ng-class, could I not use simple class here?
Try to replace ng-classs with just class, and add track by $index in your ng-repeat.
Or skip track by. Not sure what you are trying to do but, this should get you going:
http://jsfiddle.net/clto/HB7LU/8072/
what about using css pseudo-class nth-child.
you can apply different css for each child by their index in your css, instead of just creating lots of different class names for each index.
I may have worded this title incorrectly but I am hoping to still get some help. I am trying to use an expression that I get from an ng-repeat to include an new page using ng-include but it is not rendering. I can write in the page I want, but I want to use the expression to include multiple pages dynamically
<div ng-app="" id="container" ng-controller="pagesController">
<span ng-repeat="x in pages">
{{x.Page | uppercase}}
<b ng-if="!$last" href="#"> - </b>
<div ng-include="'{{x.HTML}}'" name="{{x.Page}}"></div>
</span>
But if I manually enter the pages like so:
<div ng-include="'generic.htm'" name="generic"></div>
It works as expected.
I am getting used to Angular.js obviously and I am not sure if this is possible or if I can do what I want really. Any help would be appreciated.
ng-include is an angular directive, and assuming x.HTML is a string, omit the {{}} and the single quotes:
ng-include="x.HTML"