0

I have a little problem and would really appreciate your helps. Here is the description:

I have a "kitchen-view" directive in angular-js application. Inside, it contains several nested "ng-repeat" directives. The content of these directives are dynamic and can change while the application is running.

Question: How can I manipulate DOM with simple JQuery code after all the nested "ng-repeat" has finished working(done its job) and after the data has changed inside "ng-repeat"?

This is my sample code:

<div class="order" ng-repeat="order in orders ">
  <div class="order_date">{{order.date}}</div>
  <div class="order_number">#{{order.id}}</div>
  <div class="order_table">Table {{order.table_id}}</div>

  <div class="sub_order" ng-repeat="sub_order in order.sub_orders ">
    <div class="order_dish_category" ng-repeat="(key, value) in sub_order.order_items | groupBy: 'category.name' " >
      <span class="order_dish_category_title">{{key}}</span>
      <div class="order_dish" ng-repeat="order_item in value">
        <div class="order_dish_qty">{{order_item.quantity}} x </div>
        <div class="order_dish_details">
          <span>{{order_item.dish.name}}</span>   
        </div>
        <div class="clearfix"></div>
      </div>          
    </div>
  </div>
</div>

Rustery
  • 125
  • 10
  • How exactly do you want to manipulate the DOM? What are you trying to achieve? – Jamie Dixon Oct 22 '14 at 07:25
  • I want to take the height of each child with JQuery and according to that height I would like to make changes to the template. But I do not want to create additional directives for every "ng-repeat". – Rustery Oct 22 '14 at 07:47

0 Answers0