Handle open/collapse events of Accordion in Angular

Question

If I have this code:

      {{group.content}}

         


        

Answer 1

Here's a solution based on pkozlowski.opensource solution.
Instead of adding a $watch on each item of the collection, you can use a dynamically defined Property. Here, you can bind the IsOpened property of the group to the is-open attribute.

   {{group.content}}

So, you can dynamically add the IsOpened property on each item of the collection in the controller :

$scope.groups.forEach(function(item) {
  var isOpened = false;
  Object.defineProperty(item, "IsOpened", {
    get: function() {
      return isOpened;
    },
    set: function(newValue) {
      isOpened = newValue;
      if (isOpened) {
        console.log(item); // do something...
      }
    }
  });
});

Using properties instead of watches is better for performances.