I want to set an span 2 classes and one more with conditionality if item.qty is 0. I have this
<span ng-class="glyphicon,glyphicon-minus,{'notvisible': item.qty 0}"/>
But this dont work..i think this is not the sintax but i havent found anythink.
Why don't you just add those static classes in the usual way and only leave the conditional in an ng-class, like this:
<span class="glyphicon glyphicon-minus" ng-class="{'notvisible': item.qty==0}"/>
Also, you forgot the compare-operator == (I added it in the above example).
If you only want to toggle the visibility of that element with the 'notvisible'-Class, I would even recommend you use the ng-show-Directive like this:
<span ng-show="item.qty > 0" class="glyphicon glyphicon-minus" />
Related
With Avalon Edit, I'm looking for a way to provide a highlighting format while inside something that is already formatted.
That is, I'd like to highlight thing inside quotes, but within those quotes I have another syntax that can be added that starts with ${ and ends with }.
By default, it seems that the syntax highlighting stops once it enters a 'begin' and doesn't look for any others until the end is reached.
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
</Span>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
So here the ${ syntax is only colorized if it is not within a ParamName ("). is there a way to allow my Variable highlighting to work even if it is in a ParamName (yes ParamName is from JSON formatting, I'd like my highlighting to work no matter where it shows in the JSON syntax)?
Full Highlighter code:
<Keywords color="Digits" >
<Word>true</Word>
<Word>false</Word>
</Keywords>
<Span color="Value" multiline="true">
<Begin>
(?<=:)\040?"[^"]*
</Begin>
<End>"</End>
</Span>
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
</Span>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
<Rule color="Digits">\b0[xX][0-9a-fA-F]+|(\b\d+(\.[0-9]+)?|\.[0-9]+)([eE][+-]?[0-9]+)?</Rule>
A <Span> switches to another <RuleSet> that is active within the span. By default, that's an empty rule set, so nothing else is active.
If you want a rule to apply within a span, move it to the nested ruleset:
<Span color="ParamName">
<Begin>"</Begin>
<End>(?=:)</End>
<RuleSet>
<Span color="Variable" multiline="false">
<Begin>\${</Begin>
<End>}</End>
</Span>
</RuleSet>
</Span>
I know that this question has been asked a lot but I tried re-downloading Bootstrap (I've got the latest version - 3.3.6), my #font-face{ } has the correct paths to my font files, I don't know what else to try. I get the same results in both Chrome and Firefox. One thought I had is that I'm trying to put my icons w/in <em> tags, but when I tried moving them to outside the tags, they still looked like squiggley lines, so that didn't fix it.
I want to use glyphicon-chevron-up and glyphicon-chevron-down (which show up as ≅ and [ ) but when I do something like <span class="caret"></span> then it looks perfectly normal.
Here is how I am using them:
<em class="pull-right">
<em class="pull-left">
<span class="glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
<span class="glyphicon-chevron-down" ng-click="minusOne($index)"></span>
</em>
{{ post.upvotes - post.downvotes }}
</em>
I can still click the icons and increase/decrease the vote count so I don't think it is a problem with Angular, but just for reference I am using angular1.4.9 and django1.9. Again, I know several variations of this question have been asked but none of the solutions I found worked for me so any additional ideas would be appreciated!
Maybe its for this:
<span class="glyphicon glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
In my page works great.
Just add glyphicon before the glyphicon-icon name.
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.