在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;

  };

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

输出：

样品输出

Answer 2

请尝试以下操作：

<tr ng-repeat = "favourites in items.Likes">  
       <td>{{ favourites }}</td>  
       <td ng-if="$index <= items.Dislikes.length-1">{{items.Dislikes[$index]}}</td>


</tr>  

Answer 3

试试这个代码：

  <table ng-repeat="items in artists.People">  
            <tr>  
               <th>Likes</th> 
               <th>Dislikes </th>  
            </tr>  
           <tr ng-if="items.Likes.length <= items.Dislikes.length" ng-repeat="d in items.Dislikes track by $index">
               <td>{{d}}</td>
               <td ng-if="items.Likes[$index]">{{items.Likes[$index]}}</td>
            </tr>
            <tr ng-if="items.Likes.length > items.Dislikes.length" ng-repeat="d in items.Likes track by $index">
                    <td>{{d}}</td>
                    <td ng-if="items.Dislikes[$index]">{{items.Dislikes[$index]}}</td>
                 </tr>

         </table>