CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Varun Sharma
Varun Sharma

Reputation: 4842

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

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: enter image description here

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",    
      }
    ]

Upvotes: 2

Views: 285

Answers (1)

charlietfl
charlietfl

Reputation: 171669

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>

Upvotes: 2

Related Questions