Question

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??

Answer 1

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>

Bind a variable to number of elements in a div in AngularJs

1 个答案: