I have a repeater that creates 3 directives. Each directive has its own carousel type of functionality and each has its own collection. When the carousel of the first directive changes, I want to trigger a change in the second carousel by giving the second carousel a new collection to work with.
How do I go about finding the second mission-descendant-directive's that gets created?
<div ng-repeat="mission in carouselMissions track by mission.missionDefinitionId">
<div class="row">
<mission-descendant-directive header="header" data-id="mission.missionDefinitionId" data-level="1" subChild="subChild.id"></mission-descendant-directive>
</div>
</div>
Related
I have an Angular page with a grid-like view. Inside each row is an input element:
<div class="grid">
<div class="group" ng-repeat="(key, value) in groups | groupBy: groupingFunction>
<div class="row" ng-repeat="row in value">
<input type="text" ng-model="row.name">
</div>
</div>
</div>
I want to tab through all the input elements in order. This more or less works, except that Angular will redraw the elements when I tab out of the first input element, resetting the focus to somewhere outside the grid. When I quickly press tab several times, I can usually reach the 5th or so element before that happens, so the tab order itself is working. My question is, how do I prevent Angular from (seemingly unnecessarily) redrawing part of my grid?
I tried delaying the view updates for the input, as suggested in this question, but the redraws still happen. So, it looks like something else is causing them. Any suggestions on how to find out what, would be appreciated.
I have a conatainer div in which new elements are added dynamically.
If there are elements in the div, a button is showed, otherwise it is hidden.
Is it possible to bind a variable to the length of this div, so that the button can be toggled by ng-if???
EDIT:
Example Code:
<button ng-if='IF CONTAINER HAS ELEMENTS' >I AM VISIBLE</button>
<div id='conatiner' >
<!-- ELEMENTS HERE ARE ADDED BY JQUERY APPEND FUNCTION -->
<!-- But THE ELEMENTS CAN BE REMOVED ALSO BY A JQUERY REMOVE -->
</div>
<button id='I call a function and add elements to this div' ></button>
<button id='I call a function and Delete elements from this div'></button>
I dont want to check for the number of elements in the div each time the above two buttons are clicked rather is it possible to directly bind them to a scope variable??
You can use jQuery to get the number of elements in the div:
https://api.jquery.com/length/
Or you can bind the child elements to an array object on your angular scope and get the length of that. The latter feels like the more appropriate angular approach to me. Something along these lines:
<div ng-repeat="obj in objs" ng-if="objs.length > 0"></div>
I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the way explained in this post.
However, I am planning to modify my current carousel widget to accept a number that will determine how many slides will be displayed in 1 frame, and dynamically changes its display.
For example, if 3 is passed, then 3 slides will be displayed in 1 frame.
The way I have my 2-slides-in-1-frame carousel widget is pretty static (the number of slides shown in 1 frame is already defined in its HTML). Is it possible to do this? Any help is really appreciated! Thanks.
There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel.
This is a my fork of the original angular-ui-bootstrap carousel plunkr:
http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6
The short version is:
<slide ng-repeat="slide in slides" active="slide.active">
<div class="row">
<div class="col-xs-6">
... first cell
</div>
</div>
<div class="row">
<div class="col-xs-6">
... second cell
</div>
</div>
</slide>
Then what you can do is create your own templating directive that does the math on how many columns to display (2 = col-xs-6, 3 = col-xs-4, ... ) and renders the above partial with the appropriate column classes.
I want to use AngularJS to apply filtering and sorting to a list of div elements, but for SEO reasons, I need this list of divs (and indeed the whole page) to have already been rendered on the page by the back end, in Velocity.
I was hoping using "track by" in the ng-repeat would let me do this by setting the ng-bind attribute on the div tag, and rendering the ng-repeat in each div, so it looks the same as when I inspect the list of divs rendered by AngularJS. both the Velocity context and the AngularJS model contain the same list of devices.
#foreach($device in $deviceList)
<div class="tile" ng-repeat="device in deviceList track by device.model" ng-bind="device.model">
<span ng-bind="device.brand">${deviceList.brand}</span>
<span ng-bind="device.model">${deviceList.brand}</span>
</div>
#end
but this just renders each item three times. Velocity renders the ng-repeated div, which itself renders for each. the track by doesn't link the identity of each Velocity-rendered div with its own contents.
any ideas?
In my Angular project, I have a recursive template that creates a series of "blocks" (each consisting of an encompassing div with other elements inside it) nested a few levels deep - similar to this one:
<script type="text/ng-template" id="myTemplate.html">
<div drop-target='true' class="overall">
<h2> {{obj.title}} </h2>
<div> {{obj.content}} </div>
<div ng-include="'myTemplate.html'" onload="obj=someObject.innerObjects"></div>
</div>
</script>
Each of these overall divs has a directive that lets it accept items that are dragged into it (standard drag and drop).
The problem is, that the dropping is also being allowed to happen onto the <h2> element and the content div. This is not what I want. I want the dropping to only be over the overall div.
Any ideas on how to do that?