Question

我得到了这个相当庞大而复杂的第三方JSON，其中一部分需要在我的网站上的不同位置显示。这是简短的（相信我，它很短）JSON的片段

[
    {
    "EVENTS":[
    {
        "plays":[
        {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"HOME",
                "remote":"8726401",
                "innings":"2.13"
                },
                {
                "scoreOrder":2,
                "description":"DRAW",
                "remote":"8726403",
                "innings":"3.65"
                },
                {
                "scoreOrder":3,
                "description":"AWAY",
                "remote":"8726402",
                "innings":"2.31"
                }
            ],
            "code":null,
            "acro":"MR",
            "desc":"Result"
            },          
            {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"No Goal",
                "remote":"8726438",
                "innings":"78.43"
                },
                {
                "scoreOrder":2,
                "description":"Goal in 0-22",
                "remote":"8726434",
                "innings":"1.25"
                },
                {
                "scoreOrder":3,
                "description":"Goal in 23-45",
                "remote":"8726435",
                "innings":"3.89"
                },
                {
                "scoreOrder":4,
                "description":"Goal in 46-67",
                "remote":"8726436",
                "innings":"12.05"
                },
                {
                "scoreOrder":5,
                "description":"Goal in 68-90",
                "remote":"8726437",
                "innings":"37.36"
                }
            ],
            "code":null,
            "acro":"FG",
            "desc":"1st Goal"
            },          
            {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"Home -0.5",
                "remote":"8726482",
                "innings":"2.13"
                },
                {
                "scoreOrder":2,
                "description":"Away +0.5",
                "remote":"8726483",
                "innings":"1.42"
                }
            ],
            "code":null,
            "acro":"HDMP05",
            "desc":"Handicap"
            }
            ],
        "awayTeam":"Wigan City",
        "order":0,      
        "homeTeam":"Sheffield City",
        "eventStatus":"PENDING"
    }
]

它至少要长十倍。如您所见，它由几个重复键组成。由于它是第三方产品，我甚至无法修改它。通常情况下，当我没有使用Angular时，我会这样做：

function getJSON(){
    $.getJSON('url/rest/public/app/upcoming?channel=name&amount=1', function(json){
        if (json != null){
            console.log('Load Successful!');
            var events = json[0]['events'];                     
            processEvents(events);
        }
    });
}
function processEvents(events) {     
    events.forEach(function(event){
        var games = event['games'];
        plays.forEach(function(play) {
            var outcomes = play['outcomes'];
            outcomes.forEach(function (result) {
                $('.inning-' + game['acro'] + "-" + result['scoreOrder'] + '-' + event['order']).html(result['innings']);
            });
        });
        $('.inning-AwayTeam-' + event['order']).html(event['awayTeam'].substring(0,3).toUpperCase());
        $('.inning-HomeTeam-' + event['order']).html(event['homeTeam'].substring(0,3).toUpperCase());       
    });     
};

和HTML：

<div class="row-winner">
    <div class="winner-frame inning-MR-1-1"></div>
    <div class="winner-frame inning-MR-2-1"></div>
    <div class="winner-frame inning-MR-3-1"></div>
</div>

但现在我需要使用角度。从我研究过的所有教程中，除了

之外，没有人能展示我

site.controller('jsonCtrl', function($scope, $http){
$http.get('url of json').success(function(data){
    $scope.json = data;     
});

}）;

和

<div class="random-name" ng-repeat="stuff in json | limitTo: 2">                            
    <div class="random-sub-name">{{stuff.key}}</div>                        
</div>

所以，不仅我不知道如何遍历JSON，而且它迫使我经常使用ng-repeat方式。我知道我可以通过使用类似ng-repeat然后ng-repeat="stuff2 in json.parent"的内容来缩小{{stuff2.key}}的范围，这对于所有事情都是不可能的，主要是打字，代码的可读性和我的理智。我也知道ng-repeat在许多情况下可能非常方便，特别是当我想显示数据表时，但在这个特殊情况下，这不是重点。所以，我仍然希望更多的是一次性使用工具，而不需要限制循环。无论如何，有没有可行的方法来实现我的目标？还是我坚持使用旧的jQuery方式？如果是这样，我可以在angular app.js中使用那个jQuery代码，或者我需要在jQuery代码中包含另一个js文件，并且只保留angular来处理ng-include？

修改

我忘了提到我需要填充的div通常是个体的，非重复的实体，而不是结构化为表格。他们到处都是。其中有很多 - 总共可能超过几百个。因此，对每个div进行不同的ng-repeat指令简直是不可能的。我的jQuery方法允许我用相对较少的代码和每个div的自定义类（比ng-repeat更短的方式）来处理其他任务。我选择Angular是因为它很快（我确实喜欢ng-repeat的无障碍html循环的概念），但这种情况需要更多......硬分。所以，求助！请:(

Answer 1

角度在模型和视图之间有明显的区别。如果模型中有大部分数据，则可以在将其传递给视图之前对其进行预处理（通过将其分配给范围中的字段）。

但对于视图本身 - 在您显示事件列表的情况下 - 我强烈建议您尝试使用ng-repeat等。这样的事情出了什么问题：

<div ng-repeat="event in events" class="event">
  <h2>{{ event.homeTeam }} vs. {{ event.awayTeam }}</h2>
  <ul class="plays">
    <li ng-repeat="play in event.plays">
       <div ng-repeat="outcome in play.outcomes">
         Innings: {{outcome.innings}}
       </div>
       <!-- You could also use custom directives to render plays or outcomes -->
    </li>
  </ul>
  and so on...
</div>

在AngularJS

1 个答案: