AngularJS Transition on click - angularjs

I am kind of new with angular and I found this way to use ng-click and ng-show to show the div with information in when the user clicks the h3.
The only problem is that it just shows up and I would like is it fades in or slides down to be visible. :)
Is this gonna work or should I do another way??
<div class="col-sm-12">
<div>
<h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
<hr class="no-margin-top hr-line">
</div>
</div>
<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top" style="border: 1px solid purple" ng-show="showInfoHe">
<div class="row cats-attributes">
<p>info</p>
</div>
</div>

You can do this without ngAnimate,
by using css transitions and ngClass
what you want to do on click set a variable to true and then have a class that has opacity:1.
so
<div class="parent-div" ng-click="yourVariable = true">
<div class="child" ng-class={'opacity-class': yourVariable}>
</div>
</div>
and then in the css
.parent-div {
transition: opacity ease-in-out 1s;
}
.parent-div.child {
opacity:0;
}
.opacity-class {
opacity: 1;
}
EDIT:
here is an applied solution to the html structure you provided
<div class="col-sm-12">
<div>
<h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
<hr class="no-margin-top hr-line">
</div>
</div>
<div class="show-info-container">
<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top show-info" style="border: 1px solid purple" ng-class="{'opacity-class':showInfoHe}">
<div class="row cats-attributes">
<p>info</p>
</div>
</div>
</div>
css
.show-info-container {
transition: opacity ease-in-out 1s;
}
.show-info {
opacity:0;
}
.opacity-class {
opacity: 1;
}
notice i added a container div and removed the ng-show

Related

Why Angular JS “ng-repeat” is not working?

I have this owl crousal :
<section id="intro">
<div class="sm-holder">
<div class="sm">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
<h1>
<span class="year">2020</span>
</h1>
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;">
<div class="owl-item cloned active">
<div class="item" style="background: url(../Administration/MainPageHeader/camels1.jpg)">
</div>
</div>
<div class="owl-item cloned">
<div class="item" style="background: url(../Administration/MainPageHeader/camels5.jpg)">
</div>
</div>
</div>
</div>
</div>
<div class="owl-counter"></div>
</section>
it work ok.
noW
I need to make it dyanmic.
i want to rpeat
and changing camels1.jpg based on value from DB.
I have created angualr app.
in my scope
I have
$http.get('http://192.168.1.40/Test/Apis/GetHeaderImages.ashx')
.then(function (response) {
$scope.headerImages = response.data;
var arr2 = JSON.parse(JSON.stringify(response.data));
$scope.headerImages = arr2;
});
here headerImages = 0: {Id: 5, ImageUrl: "camels7.jpg"} 1: {Id: 6, ImageUrl: "20202902051438KC.jpg"}
I did
أهلاَ بكم في
إتحاد سباقات الهجن
2020
<div class="owl-carousel owl-intro owl-loaded owl-drag">
<div class="owl-stage-outer" >
<div class="owl-stage"
style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 21010px;"id="owl-stage">
<div class="owl-item cloned" ng-repeat="x in headerImages" >
<div class="item" style="background: url(../Administration/MainPageHeader/{{x.ImageUrl}})">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="owl-counter"></div>
got it working with asp.net tags
<div class="owl-carousel owl-intro">
<div class="item" style="background: url(../Administration/MainPageHeader/camels5.jpg)"></div>
<%foreach (var item in imagesUrl)
{%>
<div class="item" style="background: url(<%=item %>)">
</div>
<%
} %>
</div>
<div class="owl-counter"></div>
so ng-repeat was not repeating dives
You should assign it to $scope.headerImages rather than headerImages in API callback.
$scope.headerImages = arr2;

Angular UI Bootstrap multiple carousel one by one

I am using AngularJS with ui bootstrap module.
1) What I need is my carousel to change its items one by one. I found a code (by other person) but it's only in jQuery.
Codepen code in jQuery
html:
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
less CSS:
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-3%;
}
&.right{
left:3%;
}
}
.next{
left: 3%;
}
.prev{
left: -3%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
jQuery
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
2) So I want multiple items change one bye one. How to do this in angularJS? Any ideas or directions?

AngularJS : change panel header background based on click

I have a panel header which I have divided into 2 parts.
when I click on one panel then its background is sky blue and text color is white while other panel background is gray with black text color and clicking on that panel background and text color is changed alternatively.
.prefix_event {
text-align: center;
background: #f2f1f1;
color: #555555;
padding: 10px;
font-size: 12px;
}
.prefix_previous {
text-align: center;
background: #24b6e3;
color: #FFFFFF;
padding: 10px;
font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous" ng-click="option='event_exhibitors'" ng-init="option='event_exhibitors'">
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" ng-click="option='previous_exhibitors'">
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
what i want is. when clicking on previous exhibitors panel. the background color and text color of event exhibitors should be given to previous exhibitors and event_exhibitors should get previous exhibitors background and text color. so it will be vice versa CSS on click.
Any help would be great.
Its very simple using the toggle option like this in the
$scope.toggle="false";
Your HTML will be like this
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous"
ng-click="toggle = !toggle"
ng-class="{prefix_event : toggle, prefix_previous : !toggle}"
>
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event"
ng-click="toggle = !toggle"
ng-class="{'prefix_previous' : toggle}"
>
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
DEMO
UPDATE 1 : Also check the modified plunker in the same link
Change these # Previous Exhibitors
<div class="panel-body" ng-show="!toggle">
Change these # Event Exhibitors
<div class="panel-body" ng-show="toggle">
you can achieve this functionality with simple Jquery.
Change colour of table row onclick
and if you use class="col-xs-12" then it overrides other higher sizes as well and make them 12(col-sm-12,col-md-12,col-lg-12).
http://getbootstrap.com/css/#grid

Angular.js How to insert css class on click and to remove all others

I'm applying two css classes onto my html, when I click on my span element.
right now I have a border and looks fine, I want keep this.
but:
so If I click in the Icon I said in the icon <i> the Icon color change for blue.
but I don't want remove the functionality of the span who contains the border.
thanks.
html + angular
<div ng-app>
<div>
<br>
<i ng-class='{"gamepad-red":tog==1}' class="fa fa-lg fa-gamepad"></i>
<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
</div>
<div>
<br>
<i ng-class='{"gamepad-red":tog==2}' class="fa fa-lg fa-gamepad"></i>
<br/><span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>
</div>
</div>
css:
.myclass {
border: dotted pink 3px;
}
.gamepad-red {
color: red;
}
.gamepad-blue {
color: blue;
}
jsfiddle: http://jsfiddle.net/zvLvg/286/
I have moved the effect of the span click to the wrapping div and used parent-child CSS to apply the red to the i element.
On click of the icon it triggers a separate boolean that controls a local class
iTog1 and iTog2 can be made to behave similar to tog if there can only be one selected
.selected-gamepad > span {
border: dotted pink 3px;
}
.selected-gamepad > i {
color: red;
}
.gamepad-blue,
.selected-gamepad .gamepad-blue{
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div ng-app>
<div ng-class="{'selected-gamepad':tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}" ng-click="iTog1 = !iTog1"></i>
<span id='1' ng-click='tog=1'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
<span id='2' ng-click='tog=2'>span 2</span>
</div>
</div>

How to make Accordion Panel-title clickable area bigger

I am trying to make the entire panel-heading click-able. I tried wrapping the div with some css.
plunkr
#box {
padding: 10px;
display: block;
width: 100%;
}
HTML:
<a id="box">
<div class="panel-heading" toggle target="collapse{{$index}}">
<h4 class="panel-title">
<span style="font-size:12px">Name :</span> <span ng-click="selectJob(currentItem, $index)">{{currentItem.JobName}}</span>
</h4>
</div>
</a>
Move ngClick to a element:
<a id="box" ng-click="selectEmployee(employee, $index)">
<div class="panel-heading" toggle target="collapse{{$index}}">
<h4 class="panel-title">
<span>{{employee.firstName}} {{employee.lastName}}</span>
</h4>
</div>
</a>
Demo: http://plnkr.co/edit/nOGHHQWxT5lEKbulmGtJ?p=preview

Resources