javascript - 在 ng-repeat angularjs 中显示数组对象

Question

我有一个简单的 json 加载列表，它使用 angular 指令从本地 json 呈现数据。

我想在单独的列中显示喜欢，在单独的列中显示不喜欢。但我尝试了下面的代码片段，但在第一列中获得了喜欢，但不确定如何在第二列中呈现不喜欢。

这是HTML

            <ul class="nav">
                <li class="active" ng-repeat="item in artists.People">
                    <a href ng-click='setSelectedArtist(item)'>{{item.name}} 
                    </a>
                </li>
            </ul>

          <!-- Displaying table -->

            <table>  
                <tr>  
                   <th>Likes</th> 
                   <th>Dislikes</th>  
                </tr>  
                <tr ng-repeat = "favourites in items.Likes">  
                   <td>{{ favourites }}</td>  
                    /* stuck here */
                </tr>  

             </table>  

JSON：

{
    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.com/200/200",
          "Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Dead Batteries"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       }
]
}

控制器：

$http.get('people.json').success(function(response) {
      $scope.artists = response;

  });

$scope.setSelectedArtist = function(artist) {
      $scope.items = artist;

  };

标签： javascriptarraysangularjsjson

Answer 1

即使喜欢和不喜欢的长度不相等，此代码也将起作用

<table>
   <thead>
      <th>Likes</th>
      <th>Dislikes</th>
   </thead>
   <tbody ng-repeat="items in test.People">
      <tr ng-repeat="i in range(items.Likes.length, items.Dislikes.length) track by $index">
         <td>{{items.Likes[$index]}}</td>
         <td>{{items.Dislikes[$index]}}</td>
      </tr>
   </tbody>
</table>

    $scope.range = function(a,b) {
        var n = Math.max(a,b);
        return new Array(n);
    };

示例 JSON

{
    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.com/200/200",
          "Description":"Gluten­free cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Batteries",
             "Football",
             "Dead Batteries"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming",
             "Dead Batteries"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       }
    ]
}

输出：

样本输出