Angular JS ng-repeat

Question

Working DEMO with Single List

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

请问我们可以添加建议吗？

http://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>

Answer 1

我终于得到了你想要的东西：

这是一个有效的傻瓜：https://plnkr.co/edit/8TLDTV0OtE10hITr9Vf9?p=preview

JSON

[
{
    "title"         :   "JavaScript ?",
    "description"   :   "Hey, here are some of the merits of javascript",
    "list"          :   [
    {
        "subtitle":"subtitle1",
        "message":"message1"
    },
    {
         "subtitle":"subtitle2",
        "message":"message2"
    }
  ] ,
    "uploadedDate"  :   "April 12 2015",
    "tags"          :   "javascript, webdevelopment"
}
]

HTML

          <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
                                </p>
              <ul class="data__lisitng">
                <li ng-repeat="message in item.list">
                  <span>{{ message.message }}</span>
                </li>
              </ul>
              <p></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>

Answer 2

至少列表应该是这样的：

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

我更喜欢这样的东西：

$scope.list = [
  {"object":"1"},
  {"object":"2"},
  {"object":"3"},
  {"object":"4"},
  {"object":"5"}
];

Answer 3

使用'['代替'{'

     [
      {"object":"1"},
      {"object":"2"},
      {"object":"3"},
      {"object":"4"},
      {"object":"5"}
     ]

Answer 4

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

无效。请使用有效的对象/数组进行ng-repeat