AngularJS ng-repeat, tables information dependencies

Question

I created two tables in server side. The first one contains informations like house, room house, number, street ...

The second one contains informations like first_color, room house, second_color ...

Of course both tables have different number of columns and rows. For instance the first one has 5 rows and the second one only 2 rows (rows increase dynamically).

As you read before they both have one common information the "room house" data. I need to change colors information of the first table with information of the second one depending on that link field 'room house'.

Here bellow is my HTML code using two times "ng-repeat" :

<div class="col-sm-6 col-md-4" ng-repeat="item in data.house | orderBy: '-count' | limitTo: data.limit">
     <div ng-repeat="d in data.colors" ng-show="d.room_house == item.room_house">
        <span style="color:{{::d.firsrt_color}}">{{::item.name}}</span>
     </div>
     <div>
        <span style="color:#444444">{{::item.name}}</span>
     </div>
</div>

However if the common information can't be find it doesn't display the rest of the table. I need to display the whole information within the first table with the color information inside the second one. If information can't be found (due to different numbers of rows between the two arrays or because data doesn't exist in the second one) I must continue to display information of the first array however with a default color.

Of course adding an html div with ng-show="d.room_house != item.room_house" doesn't work because it will display some information in two colors. Controller 1

Controller 2

Hope someone will be able to help me.

Thank you

Ajanth Ajanth · Accepted Answer · 2018-06-20T14:44:56

Instead of nested loops in HTML, you can move the logic to your controller and your HTML looks smaller and cleaner and the original issue will also be fixed. Try this solution,

var defaultColor = "#444444";
data.house.forEach(function(house) {
  house.color = defaultColor; // assign default color initially
  var obj = data.colors.filter(function(x){
     return x.room_house == house.room_house;
  }
  if(obj.length > 0) {
    house.color = obj[0].firsrt_color;
  } 
});

<div class="col-sm-6 col-md-4" ng-repeat="item in data.house | orderBy: '-count' | limitTo: data.limit">
     <div>
        <span ng-style="{ color: item.color}">{{::item.name}}</span>
     </div>
</div>

P.S: You've used "firsrt_color" instead of "first_color", I hope that's intended..

AngularJS ng-repeat, tables information dependencies

1 Answers