Question

我习惯使用AngularJS进行数据绑定，并通过其指令向前端显示数据。

基本上我已经编写了一个jQuery函数来从.JSON文件中获取一些数据：

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        console.log(myItems);
    });
});

如何在<li>

中重复myItems中的所有项目

从角度来看，它看起来像：

<ul>
    <li ng-repeat="address in myItems">
        {{ address.HouseNumber }}, {{ address.Street }}, {{ address.Postcode }}
    </li>
</ul>

如何在不使用Angular的情况下使其工作？

Answer 1

我通常使用下划线模板来做类似的事情。 http://underscorejs.org/#template

Answer 2

HTML：

<ul id="example">

</ul>

脚本：

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        $.each( myItems , function( index, address){
            $('#example').append('<li>'+ address.HouseNumber+', etc..' + '</li>');
        });
    });
});

Answer 3

看看一些javascript模板语言，比如jTemplates或JsRender。

Answer 4

您的代码如下所示

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        var ulElement = $('<ul></ul>')
        $.each(myItems, function(index, value) {
            $('<li></li>').appendTo(ulElement).text(value.HouseNumber + ' '+ value.Street + ' ' + value.Postcode);
        })
        $('#mainDiv').append(ulElement);
    });
});

如何编写jQuery样式的ng-repeat

4 个答案: