All geek questions in one place

How to use ng-repeat for multiple arrays of objects?

So, I have these 2 arrays of objects. I want to use ng-repeat so that it prints elements from countOfServicesCodesByElements with the same index as the date. Therefore, to start the date: "09.09.2016", end: "13. 09. 2016", it should print 23, etc.

  $scope.countOfServicesCodesParts = [ {
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      },
      {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      },
      {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }
    ]
  $scope.countOfServicesCodesByElements = [{
        "count": 23
      },
      {
        "count": 30
      },
      {
        "count": 20
      },
      {
        "count": 2
      }
    ]

this is my html file

  <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements.count}}</text></td>
        </tr>
      </div>
    </table>
  </div>
+4
source share
5 answers

ngRepeat offers several properties, one of which is $index. You can use this property by skipping the first array to print the desired values ​​of the second array. Something like that:

<li ng-repeat="arr1 in countOfServicesCodesParts">
    <span>{{countOfServicesCodesByElements[$index].count}}</span>
</li>

Keep in mind that this works perfectly with arrays of the same length!

+2

, ... , $scope.countOfServicesCodesByElements $scope.countOfServicesCodesParts

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{days($index)}}</text></td>
        </tr>
      </div>
    </table>
  </div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.countOfServicesCodesParts = [ {
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      },
      {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      },
      {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }
    ]
        $scope.countOfServicesCodesByElements = [{
        "count": 23
      },
      {
        "count": 30
      },
      {
        "count": 20
      },
      {
        "count": 2
      }
    ];
    $scope.days=function(x){
      return $scope.countOfServicesCodesByElements[x].count;
    }
 
});
</script>
</html>
+1

Try the following:

 <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts track by $index" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements[$index].count}}</text></td>
        </tr>
      </div>
</table>

$index is the offset of the iterator of the repeating element.

Link: https://docs.angularjs.org/api/ng/directive/ngRepeat

0
source 
<ul>
  <li ng-repeat="(index, key) in countOfServicesCodesParts">
    <span>Start Date: {{ key.start_date}}</span>
    <span>Count: {{ countOfServicesCodesByElements[index].count}}</span>
   </li>
</ul>
0
source

Try it.

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
  <div class="card-content" ng-if="countOfServicesCodesEval != 0">
   <table class="table table-striped">
    <tr ng-repeat="date in countOfServicesCodesParts">
      <td> <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
      date start {{date.start}} date end: {{date.end}}
       number: {{countOfServicesCodesByElements[$index].count}}
    </span>
      </td>
    </tr>
  </table>
  </div>
 </div>
</body>

          var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope) {
      $scope.countOfServicesCodesParts = [{
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      }, {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      }, {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }]
      $scope.countOfServicesCodesByElements = [{
        count: 23
      }, {
        count: 30
      }, {
        count: 20
      }, {
        count: 2
      }]

    });
0
source

Source: https://habr.com/ru/post/1663089/

More articles:


All Articles