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>
Related
I want to edit HTML&CSS code to arrange it differently on the page depending if a condition is met or not using AngularJS (ng commands)
I have thisYear=true or false
If thisYear is true I want the labels and input HTML tags from the page to be arrange in a certain way using inLine css if the year is false I want to arrange it in a different way.
How can I set up an if/else statement in AngularJS (ngIf) and edit the html and CSS inLine?
You need to add something like this in your view:
<div ng-if="thisYear">
<!-- Displays stuff when thisYear is true -->
</div>
<div ng-if="!thisYear">
<!-- Displays stuff when thisYear is false -->
</div>
Also, add the css classes to particular div for styling.
It looks as though there are multiple things that you may be asking for. I think you could benefit from using the ng-style and ng-class directives as well as the ng-if directive.
Using ng-if will allow you to load a div into the DOM based upon whether or not the boolean value is true or false. With this, you can easily arrange your labels in whatever position you'd like.
<div ng-if="inputTrue">
<!-- your input/labels go here and will be loaded into the DOM -->
</div>
<div ng-if="!inputTrue">
<!-- this input will not be loaded into the DOM -->
</div>
In addition to this, you can also take advantage of the ng-class and ng-style directives. Using ng-class will allow you to add a class to the div based on a condition that evaluates to true or false. The same thing goes for the ng-style directive.
It would follow something along the lines of ng-class="{'className':inputTrue}".
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>
I am designing a dynamic hr (horizonatal) rule.
In my Style sheet
hr.my-hr:after{
content:'Generic'
}
In my template
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
But how do i dynamically change the content in the template when using ng-repeat ????
All ng-style does is add inline styles. However you want to add a psuedo element ::after. According to the MDN:
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
So inferred from that you can't use them inline, which sadly means ng-style can't do what your after.
However if your ::after is defined in a stylesheet you can use ng-class to dynamically add that style.
So
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
Most cases that will suffice. However it looks like to want to dynamically set the content of ::after. So for that i can only imagine two options.
If you just want to simply add the string value use databinding
<hr />
{{name}}
However if you want extra styling on that string create a small directive as a re-usable widget may be the better option.
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?