Ng-repeat угловой «2-слойный» вопрос JSON

Я несколько нового для углового и в настоящее время я изучаю эту прекрасную структуру, создав проект для школы. Но я столкнулся с проблемой, которую я не могу решить на данный момент. Я искал много в Интернете, но не нашел что-то, что сработало для меня.Ng-repeat угловой «2-слойный» вопрос JSON

Это мой контроллер с JSON включены в него

(function() { 
     app.controller('imageController', function(){ 

     this.imageList = imageJson; 
     }); 

     var imageJson = [{ 
      "traveling": [{ 
       "name": "Kenneth Appiah", 
       "label": "pisa", 
       "src": "public/media/images/noun/traveling/pisa.svg" 
      }, 
      { 
       "name": "Oliver TubeGeometry", 
       "label": "eiffel tower", 
       "src": "public/media/images/noun/traveling/eiffel.svg" 
      }, 
      { 
       "name": "Adriano Gazzellini", 
       "label": "colosseum", 
       "src": "public/media/images/noun/traveling/colisseum.svg" 
     }] 
    }]; 

})();

Я использую, что я называю, два слоистый JSON (только надеюсь, вы понимаете, что я имею в виду здесь :-)). Но по какой-то причине я не могу достичь этих данных в своих данных в моем HTML. Я сделал некоторые угловые основные учебники и научил меня, как сделать это с помощью JSON, который не начинается с чем-то вроде:

"traveling": [{ 
      "name": "Kenneth Appiah", 
      "label": "pisa", 
      "src": "public/media/images/noun/traveling/pisa.svg" 
     }]

Но как это:

{ 
       "name": "Kenneth Appiah", 
       "label": "pisa", 
       "src": "public/media/images/noun/traveling/pisa.svg" 
      }

Так что мое предположение было бы, что мой привязка данных будет похожа на {{image.traveling.src}}. Изображение - это то, как я назвал свой ng-repeat. Но это не сработало, поэтому я немного смущен.

Это мой HTML (нг-приложение также включено, но его в файле differend)

<section class="words"> 
    <div class="colored-sidebar"></div> 
    <!-- content --> 
    <div class="previous-button"></div> 
    <div class="word-container" ng-controller="imageController as imageCtrl"> 
     <h1><span>noun</span>words</h1> 
     <div class="category-body"> 
     <p><span>noun</span>traveling</p><hr> 
     <div class="category-image" ng-repeat="image in imageList.traveling"> 
      <img src="{{image.src}}" /> 
     </div> 
    </div> 
    </section><!-- 
--></div>

Из-за мои пробы и ошибки я в настоящее время в зашоренности. Так что, возможно, это то, что я наблюдаю, но я хотел бы получить положительные отзывы и критику по моей проблеме. Если я пропущу любой код, который требуется, давайте знать, что я счастлив опубликовать его, чтобы кто-то мог мне помочь :-) Я не много работал с JSON, но так жаль, если его проблема с noob

Спасибо, Учитывая!

источник

2015-01-15 Tom Luijten

Проблема с вашим объектом json. Если вы отформатируете свой json, как показано ниже, он будет работать.

var imageJson = { 
      "traveling": [{ 
       "name": "Kenneth Appiah", 
       "label": "pisa", 
       "src": "public/media/images/noun/traveling/pisa.svg" 
      }, 
      { 
       "name": "Oliver TubeGeometry", 
       "label": "eiffel tower", 
       "src": "public/media/images/noun/traveling/eiffel.svg" 
      }, 
      { 
       "name": "Adriano Gazzellini", 
       "label": "colosseum", 
       "src": "public/media/images/noun/traveling/colisseum.svg" 
      }] 
     };

источник

2015-01-15 12:14:46

Спасибо! Я вложил json в свой код. Это не дает никаких ошибок, поэтому я предполагаю, что все в порядке. Даже когда я смотрю на свой console.log, я вижу следующее: http://imgur.com/oqAtbCJ Он даже не повторяет ничего. Я что-то упускаю? –

Вы имеете в виду, что изображения не отображаются? –

также вводит область действия вашего контроллера. app.controller ('imageController', function ($ scope) { $ scope.imageList = imageJson; }); –

Попробуйте вот так. Я буду работать

var imageJson=[{ 
       "name": "Kenneth Appiah", 
       "label": "pisa", 
       "src": "public/media/images/noun/traveling/pisa.svg" 
      }, 
      { 
       "name": "Oliver TubeGeometry", 
       "label": "eiffel tower", 
       "src": "public/media/images/noun/traveling/eiffel.svg" 
      }, 
      { 
       "name": "Adriano Gazzellini", 
       "label": "colosseum", 
       "src": "public/media/images/noun/traveling/colisseum.svg" 
     }];

Использование ng-repeat="image in imageList" .... Это, безусловно, работать

источник

2015-01-15 12:54:50 Ragesh

Ng-repeat угловой «2-слойный» вопрос JSON

ответ

Смежные вопросы