如何在angular js中设置ng-repeat中键的位置值？

Question

我在 ng-repeat 的帮助下实现了一个 table。我在数组中调用多个 object。所以一个 object 有 2 个键值，但是位置可能会改变。然后我要设置键值的位置。

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>

以上代码片段运行良好。但是在我的项目中有相同的代码，它给我的输出如下：

代码相同，我在片段中复制了相同的代码然后它工作正常但相同的代码在我的项目中不起作用。 我正在使用 angular 版本 1.4.2 我想根据 class 之类的标题设置值，应该只包含 class 名称，标记应该按百分比计算。我不知道是什么原因。我正在分享我的项目代码。

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

Answer 1

对象没有顺序。使用属性个名称的数组并重复

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

查看

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

但是如果您只有几个属性并且它们总是相同的，那么不进行内部循环并自己创建 <td> 会更干净

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

如何在angular js中设置ng-repeat中键的位置值？

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

javascript

angularjs

angularjs-ng-repeat