I need something like this:
$scope.toggle = true;
<a If(toggle){ ng-click="vm.addFilter()" } else{ '' } >Add Policy</a>
Can I do it as easy as possible?
Do you want to do this?
//If you want to hide the element use this
<a ng-if="toggle" ng-click="vm.addFilter()" >Add Policy</a>
or this
//If you want to avoid the event with toggle variable
<a ng-click="toggle && vm.addFilter()" >Add Policy</a>
You can't add or remove any attribute using angular core directive, you could do something like below. I think you don't wanted to call vm.addFilter() conditionally.
<a ng-click="toggle && vm.addFilter()">Add Policy</a>
How && works in depth?
#deceze has good point that there is not need to show element unless it is doing some action. As per that you could also go for hiding/removing the element using ng-if as #Serginho suggested in his answer.
Related
In my app.js file I have classes that are data driven, such as text and picture classes. I have a hyperlink class for which I used Href that looks like this:
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{
content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }} </a>
</div>
So this way I can easily use it like this in my .JS file:
fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
The problem that I am having is making a field for an image:
fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref: "www.etc.com",
Clicking the picture should redirect me to the url.
I can do this in my .html file just fine, by simply wrapping the image in the class, but I want to select the image in my .JS file.
How do I make this happen without hard coding the links and images in the .html file ?
Thank you!
Sorry about this but I will criticize your code a bit.
First to point out that you have a typo, LinkField should probably be fieldLink in your first <a> element.
Next, why are you comparing !== false when you can just check if var is true or truthy (just put variable in condition - no need to compare with anything - if it's there or is true it will be truthy).
Also to create a new element just because you need to have different attribute is bad, you will get tons of code and get lost at some point. Instead use ng-attr-target which will give you same thing in one line - puts target (or any other) attribute based on condition.
But all of that can be fixed of course, I will take a wild guesses on your data structure during this since you haven't provided jsfiddle or similar. I guess that you have a list of objects that hold images or links and you want to put them together in some ng-repeat based on the type either show link or image.
So this would be your data object:
let contentObj = [{
fieldLink: {
fieldLinkNewTab: false,
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
}
}, {
fieldLink: {
fieldLinkNewTab: true,
fieldLinkHref: "www.etc.com",
fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
}
}];
and this would be your html, if fieldLinkText is there it will show text, if fieldLinkImage is there it will show image, keep in mind if you have both it will show both, also by utilizing power of ng-attr-target you show one element in html and not two with ng-if:
<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
<a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
<span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
<img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
</a>
</div>
I hope this is helpful, I didn't mean to be too critic, if I was sorry about that, but these things will help you in future. And here's the fiddle that you can play on change your data tweak it up a bit: https://jsfiddle.net/pegla/j392Lvdp/3/
I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?
I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.
Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).
<div id="vuemain">
<span v-if="diced < 6">Looser</span>
<span v-if="diced == 6">Winner</span>
<a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a>
</div>
So after rendering by VueJS the <a> tag should be like:
<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->
OR
<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->
Do you understand what my problem is and is that somehow possible?
Many thanks in advance
Allan
This should work.
<a :href="'https://link-to-whatever.com/'+ (diced==6 ? 'winner' : 'looser')">LINK</a>
It looks like you were trying to use the object syntax, which won't really work in this case. Instead, just use the ternary above.
right now i'm using an ng-if to determine which button to show my users based on a condition. It just checks if my $scope.method matches the file variable.
<a class="btn btn-default" ng-if="method != file" ng-click="change(file)">Upload</a>
<a class="btn btn-primary" ng-if="method === file" ng-click="change(file)">Upload</a>
however im wondering if there is a more eloquent way to do this by using ng-class or any other angular directives...
Yes, you are correct. ng-class is what you are wanting.
<a class="btn" ng-class="{'btn-default': method != file, 'btn-primary': method === file}"
ng-if="method != file" ng-click="change(file)">Upload</a>
Here is a fantastic article I always reference when I'm needing to use ng-class.
You shall use ng-class to acheive that and add conditionnal class
https://docs.angularjs.org/api/ng/directive/ngClass
I'm trying to select this button using protractor:
<button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$arrowAction(-1, 0)">
<i class="glyphicon glyphicon-chevron-up">
</i>
</button>
the only unique element in this is ng-click="$arrowAction(-1, 0)"
Nothing I have tried works:
element(by.css("//button[#ng-click='$arrowAction(-1, 0)']")).click();
//button[#ng-click='$arrowAction(-1, 0)'] is not a valid CSS selector. It actually looks like this is an XPath expression and you meant to use by.xpath() locator.
You can though use the partial attribute check instead:
$("button[ng-click*=arrowAction]").click();
$ here is a shortcut to element(by.css(...)), *= means "contains".
Or, do an exact match:
$("button[ng-click='$arrowAction(-1, 0)']").click();
I still don't like the location technique used in this case, but, given what we have, it is probably the best we can do. Ideally, if you have control over the application code and templates, add a meaningful id, class or a custom data attribute to uniquely identify the element.
(EDIT:
I forgot to ask to not use jQuery)
I'm trying to select html buttons based on their displayed text, not their class or id.
All the button have the same dom structure and classes. Like follow and unfollow buttons in the folowing example:
<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
<span class="button-text following-text">
Following
</span>
<span class="button-text unfollow-text">
Unfollow
</span>
</button>
The closest solution I found is based on the dom structure like getElementsByClassName, getElementById and :contains(), but I can't figure it out.
EDIT2:
The solution in jQuery would be $('span:hidden:contains(Follow)').parent();
but I'm searching for a solution without jquery.
Try with the below code, you can style accordingly
$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );
you can give id's to spans as follows:
<span id="follow" class="button-text following-text">
Following
</span>
<span id="unfollow" class="button-text unfollow-text">
Unfollow
</span>
and then by using the below code in javascript, you can check their status
if(document.getElementById("follow").innerHTML=="Following"){
//follow
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow
}
I found a way to do it with :hidden but this is jQuery and thus not useful in my case.
$('span:hidden:contains(Follow)').parent();
The best thing I found now is to get all buttons first and then use a condition (takes 2 steps, but working).
var buttons=document.getElementsByClassName('...');
//loop...
if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
//buttons[i]
}
If you find a better solution it's still welcome :-)