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

【问题标题】：Displaying array object in ng-repeat angularjs在 ng-repeat angularjs 中显示数组对象
【发布时间】：2018-07-10 18:27:57
【问题描述】：

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

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

这里是 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":"Glutenfree 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;

  };

【问题讨论】：

标签： javascript arrays angularjs json

【解决方案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":"Glutenfree 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"
          ]
       }
    ]
}

输出：

Sample output

【讨论】：

【解决方案2】：

尝试以下方法：

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


</tr>

【讨论】：

【解决方案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>

【讨论】：