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":"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;

  };

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":"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

Answer 2

尝试以下操作：

import { Component, Input } from '@angular/core';

import { INTERFACE } from './mydata/interface';

@Component({
  selector: 'child-column',
  template: `
    <div *ngIf="item.id">{{item.id}}</div>
    <div *ngIf="item.name">{{item.name}}</div>
    <div *ngIf="item.address">{{item.address}}</div>
    <div *ngIf="item.phone">{{item.phone}}</div>
  `
})
export class ChildColumnComponent {
  @Input() item: INTERFACE;
}

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>

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

3 个答案: