How set position value of key in ng-repeat in angular js?

Question

I am implementing one table with help of ng-repeat. I am calling multiple object in array. So one object have 2 key value, But position may be change. Then I want to set the position of key value.

angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
 $scope.predictediveData =
      [
        {
          "mark": 0.99999,
          "class": "NONE"
        },
        {
          "mark": 0.999099,
          "class": "first",         
         
        },
        {
          "class": "second",
          "mark": 0.9990999,         
        },
        {         
          "mark": 0.9990999,     
          "class": "seven",    
        }
      ]
})

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div class="table-responsive">
<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
                      <div class="table-responsive">

                    <table class="table table-bordered">
                      <thead>
                        <tr bolder>
                          <th class="bordered bg-primary" style="color:#fff">class</th>
                          <th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
                        </tr>                      
                      </thead>
                      <tbody>
                        <tr ng-repeat="item in predictediveData">                         
                          <td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                    </section>
                  </body>                  
                  </div>

Above snippet is working fine. But Same code in my project, It is giving me output like below:

Code is same, I copied same code in snippet then it is working fine but the same code is not working in my project. I am using angular version 1.4.2 I want to set value according to heading like class should containes only class name and marks should be come into percentage. I don't know what is the reason. I am sharing my project code.

HTML

<div class="widget-body">

                    <div class="table-responsive">

                        <table class="table table-bordered">
                          <thead>
                            <tr bolder>
                              <th class="bordered bg-primary" style="color:#fff">Class</th>
                              <th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
                            </tr>                      
                          </thead>
                          <tbody>
                            <tr ng-repeat="item in predictediveData">                         
                              <td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                </div>

JAVASCRIPT:

  $scope.predictediveData =
    [
      {
        "mark": 0.99999,
        "class": "NONE"
      },
      {
        "mark": 0.999099,
        "class": "first",         

      },
      {
        "class": "second",
        "mark": 0.9990999,         
      },
      {         
        "mark": 0.9990999,     
        "class": "seven",    
      }
    ]

I don't think you should be using the second `ng-repeat`. [JS doesn't guarantee object order](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) like an array. "class" and "mark" may be shown in any order. Split it into `{{item.mark}}` and `{{item.class}}` — Aleksey Solovey, Jan 31 '18 at 13:55
@AlekseySolovey You are right. No need to inner ng-repeat
{{value.mark}}

{{value.class}} — Varun Sharma, Jan 31 '18 at 13:58
Please take this : https://stackoverflow.com/questions/48536162/how-to-remove-default-order-of-ng-repeat/48536321#48536321 — Ramesh Rajendran, Jan 31 '18 at 14:24

charlietfl · Accepted Answer · 2018-01-31T14:09:05.977

2

Objects have no order. Use an array of the property names and repeat that

$scope.props = ['mark', 'class'];

View

<tr ng-repeat="item in predictediveData">                         
    <td ng-repeat="prop in props"><p>{{item[prop]}}</p></td>
</tr>

But if you only have a few properties and they are always the same it would be cleaner to not do the inner loop and just create the <td> yourself

<tr ng-repeat="item in predictediveData">                         
    <td><p>{{item.class}}</p></td>
    <td><p>{{item.mark}}</p></td>
</tr>

edited Jan 31 '18 at 14:09

answered Jan 31 '18 at 13:58

charlietfl

164,229
13
110
143

thanks for the answer. If this question is use full for other then vote-up for helps other – Varun Sharma Jan 31 '18 at 14:20

How set position value of key in ng-repeat in angular js?

1 Answers1