I have two divs. I need to show one at a time.
<div ng-show="viewdiv">
</div>
<div ng-show="adddiv">
</div>
<a style="" href="#" ng-click="viewdiv=true" >View</a>
How to set adddiv = false? by this same ng-click.
ng-click="viewdiv=true,adddiv=false"
Is not working.
Use only one variable like viewdiv and use it like
<div ng-show="viewdiv">
</div>
<div ng-show="!viewdiv">
</div>
<a style="" href="#" ng-click="viewdiv=true" >View</a>
Using semi-colon to separate statements will work
<a style="" href="#" ng-click="viewdiv=true;adddiv=false" >View</a>
<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
Div
</div>
See sample snippet here
HTML
<div ng-show="viewDiv">
div1
</div>
<div ng-show="!viewDiv">
div2
</div>
<a style="" href="#" ng-click="viewDiv = !viewDiv" >Click</a>
Controller
$scope.viewDiv = true;
See http://jsfiddle.net/y9wy70ng/
Additionally you may play with
<a style="" href="#" ng-click="viewDiv = !viewDiv">Change to
<span ng-show="viewDiv">div2</span>
<span ng-show="!viewDiv">div1</span>
</a>
See http://jsfiddle.net/sdp9t96b/
Related
i got this code from http://www.lightningdesignsystem.com/components/carousel/#About-Carousel. it was supposed to do the auto play function but it is not working, even the round buttons are also not working. am i missing something?
i also know about the LWC carousel, but i need to customize some of the things which was not possible on that, so was trying this one.
code
<template>
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style="transform:translateX(-0%)">
<div id="content-id-01" class="slds-carousel__panel" role="tabpanel" aria-hidden="false" aria-labelledby="indicator-id-01">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="0">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-01.jpg" alt="Visit App Exchange" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Visit App Exchange</h2>
<p>Extend Salesforce with the #1 business marketplace.</p>
</div>
</a>
</div>
<div id="content-id-02" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-02">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-02.jpg" alt="Click to Customize" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Click to Customize</h2>
<p>Use the Object Manager to add fields, build layouts, and more.</p>
</div>
</a>
</div>
<div id="content-id-03" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-03">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-03.jpg" alt="Download SalesforceA" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Download SalesforceA</h2>
<p>Get the mobile app that's just for Salesforce admins.</p>
</div>
</a>
</div>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-01" class="slds-carousel__indicator-action slds-is-active" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="content-id-01" title="Visit App Exchange tab">
<span class="slds-assistive-text">Visit App Exchange tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-02" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-02" title="Click to Customize tab">
<span class="slds-assistive-text">Click to Customize tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-03" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-03" title="Download SalesforceA tab">
<span class="slds-assistive-text">Download SalesforceA tab</span>
</a>
</li>
</ul>
</div>
</div>
</template>
Code is only for understanding purpose. This does not include javascript. You have to wire your code to JS with following aspects:
Write onclick function on anchored tag of "round button" as you call them in question.
This JS button should call a method which does following things :
mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
find which element is clicked and add "slds-is-active" in class attribute.
make area selected attribute to true for only the element clicked.
make tab index of actual panel should be 0 for tab to be shown. This can be matched by indicator Id. and for all others it should -1.
assign transform style dynamically using formula : -100*index
Here is sample:
<template>
<div style="">
<div class="slds-carousel" id="carousel-example-generic" data-ride="carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style={transformstyle}>
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<div id={dataIndex.contentid}
key={dataIndex.index}
class="slds-carousel__panel"
role="tabpanel"
aria-hidden={dataIndex.areahidden}
aria-labelledby={dataIndex.indicatorid}>
<div
class="slds-carousel__panel-action slds-text-link_reset"
tabindex={dataIndex.tabindex}>
<div >
<!-- Any LWC which you want to show in screen -->
</div>
</div>
</div>
</template>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<li data-target="#carousel-example-generic"
key={dataIndex.index}
data-slide-to={dataIndex.dataslideto}
class="slds-carousel__indicator"
role="presentation">
<div id={dataIndex.indicatorid}
class={dataIndex.liclass}
data-index={dataIndex.index}
data-ariacontrols={dataIndex.contentid}
role="tab"
aria-selected={dataIndex.areaselected}
aria-controls={dataIndex.contentid}
onclick={handleclick}
title="Visit App Exchange tab">
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
in JS have this function :
selectelement(index){
this.template.querySelectorAll(".slds-carousel__indicator-action").forEach(ele=>{
ele.classList.add('slds-is-active');
ele.classList.remove('slds-is-active');
});
this.template.querySelector(`[data-index="${index}"]`).classList.add('slds-is-active');
this.dataDisplay.forEach(ele=>{
ele.areaselected = false;
ele.tabindex = -1;
ele.areahidden = true;
if(ele.index === index){
ele.areaselected = true;
ele.tabindex = 0;
ele.areahidden = false;
}
});
this.transformstyle = `transform:translateX(-${
index * 100
}%);`
this.dataDisplay = [...this.dataDisplay];
}
I am using the Angular-slick directive and I am having a tiny bit of a problem. I am sure that others may have had similar problems, but I hope someone out there can help me figure this out.
So I have a series of angular directives on my page. Each directive has properties that can be set in order to filter data in the other directives. My Angular-slick directive is bound to data that is coming from a Web API call. On the first load, the directive is perfect and it works fine. But once an action from one of the other directives causes the Angular-slick directive to filter its data (which is just another Web API call that returns similar data as the initial load), the entire the slider gets wacky and out of order. All the slides are displayed vertically.
Here is the code from the template:
<div id="slickContainer" ng-show="ctlr.SectionDataAvailable">
<div id="slickSlider">
<div id="currentDateRange">
<span ng-bind="ctlr.ApiResult.CurrentDateRangeHeaderText"></span>
</div>
<div id="previousDateRange">
<span ng-bind="ctlr.ApiResult.PreviousDateRangeHeaderText"></span>
</div>
<div id="slick">
<slick init-onload="false"
data="ctlr.DataLoaded"
arrows="true"
slides-to-show="3"
slides-to-scroll="3"
infinite="false"
dots="false"
responsive="ctlr.SlickResponsive()">
<div ng-repeat="doubledUpResult in ctlr.ApiResult.DoubledUpResults" id="slickConatiner">
<!--Current Item-->
<div id="currentItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<span>{{doubledUpResult.CurrentItem.Headline}}</span><br />
<div ng-show="doubledUpResult.CurrentItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.CurrentItem.LastPropertyName}}</span>
<span>{{doubledUpResult.CurrentItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.CurrentItem.ActivityTotalText}}{{doubledUpResult.CurrentItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.CurrentItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.CurrentItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.CurrentItem)">
{{doubledUpResult.CurrentItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.CurrentItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.CurrentItem.CreativeIdStr"
creative-type="doubledUpResult.CurrentItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
style="margin: 0 auto; cursor:pointer;"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.CurrentItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.CurrentItem)"
class="top-creatives-button current-item"
ng-show="doubledUpResult.CurrentItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.CurrentItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
<!--Previous Item-->
<div id="previousItemContainer">
<div class="creative-item-heading-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<span>{{doubledUpResult.PreviousItem.Headline}}</span><br />
<div ng-show="doubledUpResult.PreviousItem.IsFirstOccurrenceVisible">
<span style="color: #dd4f04;">First Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.FirstPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.FirstCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsLastOccurrenceVisible">
<span style="color: #dd4f04;">Last Occurrence: </span>
<span>{{doubledUpResult.PreviousItem.LastPropertyName}}</span>
<span>{{doubledUpResult.PreviousItem.LastCreativeDateText}}</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.HasACreative">
<span style="color: #dd4f04;">Total: </span>
<span>
{{doubledUpResult.PreviousItem.ActivityTotalText}}{{doubledUpResult.PreviousItem.ActivityFootnoteIndicator}}
</span>
</div>
<div ng-show="doubledUpResult.PreviousItem.IsAdvertiserVisible">
<span style="color: #dd4f04;">{{doubledUpResult.PreviousItem.EntityTypeDescription}}:</span>
<span>
<a ng-click="ctlr.OnEntityLinkClicked(doubledUpResult.PreviousItem)">
{{doubledUpResult.PreviousItem.EntityName}}
</a>
</span>
<span>{{doubledUpResult.PreviousItem.ExtraAdvertiserNote}}</span>
</div>
</div>
<div class="creative-thumbnail"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<kmi-crv-thumbnail creative-id="doubledUpResult.PreviousItem.CreativeIdStr"
creative-type="doubledUpResult.PreviousItem.CreativeType"
size="ctlr.ThumbnailSize"
storage-provider="ctlr.StorageProvider"
base-path="'/KMI/IntelliDrive/ApplUI'"
ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
style="margin: 0 auto; cursor:pointer;"
is-delayed="'true'"></kmi-crv-thumbnail>
</div>
<div class="creative-item-button-container"
ng-show="doubledUpResult.PreviousItem.HasACreative">
<a ng-click="ctlr.OnCreativeClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.IsQuickViewVisible"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'QuickView')">Quick View</a>
<a ng-click="ctlr.OnViewInLibraryClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanViewInLibrary"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'ViewInLibrary')">View in Library</a>
<a ng-click="ctlr.OnAddToCartClicked(doubledUpResult.PreviousItem)"
class="top-creatives-button previous-item"
ng-show="doubledUpResult.PreviousItem.CanAddToShoppingCart"
ng-style="ctlr.GetStyle(doubledUpResult.PreviousItem, 'AddToCart')">Add to Cart</a>
</div>
</div>
</div>
</slick>
</div>
</div>
</div>
When the action from another directive is fired, all I want to do is make a Web API call, which brings back a new data set that the slider is then rebound to. My problem is I can't figure out how to do the rebinding without breaking the slider.
Thanks.
this is my code..
<div class="container-fluid" id="con2">
<div class="row-fluid" id="row2">
<div ng-repeat="product in productDetails" class="row">
<div id="searchDiv1" class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-sm-offset-2 col-sm-1 col-xs-offset-1 col-xs-2 padding-0" id="div21" >
<div class="Enlarge">
<img style="width:70px; height:70px;" class="center-block enlarge pull-right {{product.classInfo}}" ng-model="productImage" ng-src="{{product.documents.image}}">
<span> <img id="dataImage" ng-src="{{product.documents.image}}"></span>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-6 {{product.classInfo}}" id="div23">
<div id="p2" class="ng-binding "><a href="#" ng-click="openProductSheet(product.id)" >{{product.id}}</a></div>
<div id="p3" class="ng-binding" > {{product.descriptionTranslation}}</div>
</div>
</div>
</div>
The problem is that the same page is getting loading instead of link in new tab]
I saw some of the blogs of stackoverflow but not able to fix the problem.what is the mistake i am doing ?? any help is appreciable.
Thanks
Try changing the link by adding a target attribute:
<a href="#" target="_blank" ng-click="openProductSheet(product.id)" >{{product.id}}</a>
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div class="corousal-container">
<div class="col-md-12">
<ul id="tabs" class="ops-tabs">
<li class="col-md-4 ops-list active">
<a href="#" class="ops-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Graphs</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="execView">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#execView" class="active"></li>
<li data-slide-to="1" data-target="#execView" class=""></li>
<li data-slide-to="2" data-target="#execView" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container" id="pie-chart1">
</div>
</div>
<div class="item">
<div class="container" id="pie-chart2">
</div>
</div>
<div class="item active">
<div class="container" id="pie-chart3">
<div class="carousel-caption">
<canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
<a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>
</div>
If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.
<div ng-view onload="viewLoaded()"></div>
$scope.viewLoaded=function(){
$('.carousel ').carousel()
}
Use angular Bootstrap directives for this.
http://angular-ui.github.io/bootstrap/
So I've got this repeated element...
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
The nested div with the popunder class should show when mouseover and hide with mouseout. I would write this in jQuery as so...
$('.media-folder').hover(
function(){
$(this).find('.popunder').show();
return false;
},
function(){
$(this).find('.popunder').fadeOut('fast');
return false;
}
);
How would I do this the Angular way?
You can do it all in the view using ng-show, ng-mouseenter and ng-mouseleave directives.
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder" ng-mouseenter="showDiv=!showDiv" ng-mouseleave="showDiv=!showDiv" ng-init="showDiv=false">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder" ng-show="showDiv">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
You can then use ngAnimate if you like some animation. Of course, there are other ways of achieving same.