Question

我正在尝试包含以下json响应的代码

{
    "Title": "Harry Potter and the Sorcerer's Stone",
    "Year": "2001",
    "Rated": "PG",
    "Released": "16 Nov 2001",
    "Runtime": "152 min",
    "Genre": "Adventure, Family, Fantasy",
    "Director": "Chris Columbus",
    "Writer": "J.K. Rowling (novel), Steve Kloves (screenplay)",
    "Actors": "Richard Harris, Maggie Smith, Robbie Coltrane, Saunders Triplets",
    "Plot": "Rescued from the outrageous neglect of his aunt and uncle, a young boy with a great destiny proves his worth while attending Hogwarts School of Witchcraft and Wizardry.",
    "Language": "English",
    "Country": "UK, USA",
    "Awards": "Nominated for 3 Oscars. Another 15 wins & 58 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwNTM5NDkzNV5BMl5BanBnXkFtZTYwODQ4MzY5._V1_SX300.jpg",
    "Metascore": "64",
    "imdbRating": "7.4",
    "imdbVotes": "344,737",
    "imdbID": "tt0241527",
    "Type": "movie",
    "Response": "True"
}

我正在迭代键和值，如下所示：

<div class="card" ng-repeat="(key,value) in movie">
    <div class="item item-divider positive">
        {{  key }}
    </div>
    <div class="item item-text-wrap">
        {{ value }}
    </div>
</div>

这导致项目按键的升序显示[Actors，Awards ...]。如何在不改变订单的情况下显示它？

Answer 1

您可以这样尝试：

function demo ($scope) {
  
  var data = {
    "Title": "Harry Potter and the Sorcerer's Stone",
    "Year": "2001",
    "Rated": "PG",
    "Released": "16 Nov 2001",
    "Runtime": "152 min",
    "Genre": "Adventure, Family, Fantasy",
    "Director": "Chris Columbus",
    "Writer": "J.K. Rowling (novel), Steve Kloves (screenplay)",
    "Actors": "Richard Harris, Maggie Smith, Robbie Coltrane, Saunders Triplets",
  };
  
  var order = ['Title', 'Year', 'Rated', 'Released', 'Runtime', 'Genre', 'Director', 'Writer', 'Actors'];
  
  function setOrder (obj) {
    var out = [];
    order.forEach(function (key) {
      out.push({ title: key, value: obj[key] });
    });
    return out;
  }
  
  $scope.items = setOrder(data);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">

  <table>
    <tr ng-repeat="item in items">
      <td>{{ item.title }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </table>

</div>

OrderBy on单个json对象ng-repeat

1 个答案: