Angular JS ng-repeat

使用单个列表的DEMO

编辑：试图将JSON中的代码段添加到图像中所附的前端显示中。

你能给我们一些建议吗？

https://i.stack.imgur.com/Y2LOs.png

我有一个必须在清单中显示的数据列表，到目前为止，我只有一个对象，只有一个li可以添加

我们可以像这样把物体放在一边吗？我试过了，但有错误。

"list":{
          {"object":"1"},
          {"object":"2"},
          {"object":"3"},
          {"object":"4"},
          {"object":"5"}
        }

JSON:

    [
    {
        "title"         :   "JavaScript ?",
        "description"   :   "Hey, here are some of the merits of javascript",
        "list"          :   "JavaScript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that it is JavaScript.",
        "uploadedDate"  :   "April 12 2015",
        "tags"          :   "javascript, webdevelopment"
    }
    ]

JS:

var app = angular.module("jsBlogApp", []);

//Menu 
app.service("headerMenu", function($http, $q) {
    var deferred = $q.defer();
    $http.get('json/headerMenu.json').then(function(data){
        deferred.resolve(data);
    });
    this.getMenuItems = function (){
        return deferred.promise;
    }
})
.controller("headerMenuCtrl", function($scope, headerMenu){
    var promise = headerMenu.getMenuItems();
    promise.then(function(data){
        $scope.headerMenuItems = data.data;
        console.log($scope.headerMenuItems);
    })
})

// Secondary Menu
app.service("secondaryHeaderMenu", function($http, $q) {
    var deferred = $q.defer();
    $http.get('json/secondaryHeaderMenu.json').then(function(data){
        deferred.resolve(data);
    });
    this.getSecondaryMenuItems = function (){
        return deferred.promise;
    }
})
.controller("SecondaryheaderMenuCtrl", function($scope, secondaryHeaderMenu){
    var promise = secondaryHeaderMenu.getSecondaryMenuItems();
    promise.then(function(data){
        $scope.SecondaryMenuItems = data.data;
        console.log($scope.SecondaryMenuItems);
    })
})


app.service("jsBlogService", function($http, $q) {
    var deferred = $q.defer();
    $http.get('json/data.json').then(function(data){
        deferred.resolve(data);
    });
    this.getPlayers = function (){
        return deferred.promise;
    }
})
.controller("jsBlogCtrl", function($scope, jsBlogService){
    var promise = jsBlogService.getPlayers();
    promise.then(function(data){
        $scope.items = data.data;
        console.log($scope.items);
    })
})

HTML:

｛｛menu.title｝｝

        <div class="second__header">
            <div class="second__header__wrap clearfix">
                <div class="js__logo__wrap">
                    <h1 class="js__logo">JS Developer</h1>
                    <div class="js__logo__subtitle">~ codeJS </div>
                </div>
                <div class="c2f__nav__wrap" data-ng-controller="SecondaryheaderMenuCtrl">
                    <ul class="c2f__nav">
                        <li data-ng-repeat="menu in SecondaryMenuItems">
                            <a href="{{menu.link}}">{{menu.title}}</a>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
    </header>
    <section class="c2f__content clearfix">
        <div class="c2f__cont_left">
            <!--content starts-->
            <div class="content__wrap" data-ng-controller="jsBlogCtrl">
                <div data-ng-repeat="item in items">
                    <h2 class="title__head"> {{ item.title }}</h2>
                    <p class="desc__head">{{ item.description }}</p>
                    <p>Listing
                        <ul class="data__lisitng">
                            <li>
                                <span>{{ item.list }}</span>
                            </li>
                        </ul>
                    </p>

                    <div class="code"></div>
                    <span class="content__added__date">
                        {{ item.uploadedDate }}
                    </span>
                    <span class="content__tags">
                        <span class="tags__links__title">Tags - </span>
                        <span class="tags__links__desc">{{ item.tags }}</span>
                    </span>
                </div>
            </div>
        </div>
    </section>
    <footer>
    </footer>
</div>