I'm trying to fill a Bootstrap Carousel component with data from AngularJS.
Basically I'm filling the items inside carousel-inner class like this:
<div class="carousel-inner">
<div class="item" ng-repeat="screen in app.screens">
<img ng-src="screens/{{screen}}" class="center"/>
</div>
</div>
Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the active class.
In the official documentation:
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
The first div has "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.
How can I set the first item from ng-repeat to have the "active" class?
Use the following:
<div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}">
Here you can see which properties are exposed on the local scope.
Related
I have an angular application with sets of array items "array_var". When I push new sets of array to array_var, I noticed that the ng-repeat in my html creates a duplicate ng-repeat.
everytime I push new array to the array_var there is also another duplicate ng-repeat created.
Sample ng-repeat:
<div ng-repeat="d in icons track by $index" class="icons-holder">
<div class="col-lg-12 col-md-12 col-sm-12 sub-category text-center" ng-hide="d.date == icons[$index-1].date">
<div class="searchTag-holder pad-left-25 pad-right-25 d-inline-b">
<ul>
<li class="searchTag">
{! d.date !}
</li>
</ul>
</div>
</div>
</div>
The repeated attribute is normal in this feature, you can see the example here:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-repeat2 (Inspect element)
If you want to avoid that attribute you could repeat the element with pure javascript/typescript.
This link has more details: https://www.w3schools.com/angular/ng_ng-repeat.asp
I have a bunch of pages following the same layout but some of them have a "secondary" navigation bar at the top. When this navigation bar exists I have to push the main content down from the page using margin-top in the less.
My issue is I can't find a clean way of doing this just through the DOM.
sample.html
<!-- The secondary navigation below the header -->
<div class="navigation-row text-center">
<div class="col-xs-offset-2 col-xs-8 text-center">
<h4> Sample Page </h4>
</div>
</div>
<!-- Main Content -->
<div class="row">
...
index.html (inherited template that every page uses)
<!-- Main Content -->
<div class="content container-fluid">
<div ng-class="{'secondary-nav' : document.getElementsByClassName('navigation-row').length > 0}" ui-view="main"></div>
</div>
So basically in my main content section I am trying to check if the class navigation-row exists on the page (navigation-row is the class for the secondary navbar) and if it does then add the class secondary-navbar-padding to the div.
I have tried using angular.element which looks like
<div class="row" ng-class="angular.element($document).hasClass('navigation-row') ? 'secondary-navbar-padding' : ''">
but it didn't work. Is this even possible to do? Am I approaching this incorrectly or if there is a suggestion for a better cleaner way to do this I would be open to do that also.
I think you are only checking if the document element itself has that class.
You can count the number of elements with that class like this:
document.getElementsByClassName('navigation-row').length
So you could use ng-class this way:
<div class="row" ng-class="{'secondary-navbar-padding' : document.getElementsByClassName('navigation-row').length > 0}">
I can't make this slider work, taking data from the controller.
This example works fine:
<div class="w-slider-mask" >
<div class="w-slide slide"></div>
<div class="w-slide slide bg2"></div>
<div class="w-slide slide bg3"></div>
</div>
How to use ng-repeat in this case?
Live demo : http://visitalhoceima.aandh-studio.com/demo2/index2.html#
I'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>
Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.
Consider the following HTML
<div class="sortcontainer">
<div class="item"> i1</div>
<div class="item"> i2</div>
<div class="item nondraggable"> i3</div>
<div class="item"> i4</div>
<div class="item"> i5</div>
<div class="item nondraggable"> i6</div>
<div class="item nondraggable"> i7</div>
<div class="item"> i8</div>
</div>
I am applying a sortable (jQuery UI) on the sortcontainer div.
I want to make some items (here i3, i6 and i7) non-draggable. But they should remain sortable in the list.
I tried disabling sorting for those items. If I do that, they will become non-draggable, but their position will be freezed. For example, once I disable them, i wont be able to drop anything between i6 and i7 as they are disabled.
I want to be able to make these elements non-draggable yet remain sortable.
Any ideas?
JSFiddle Link : Demo
Use the cancel parameter to set elements that should not be dragged.
cancel: '.nondraggable',
http://jsfiddle.net/ExplosionPIlls/pSe9c/1/