Угловые модули не работают

Question

У меня есть угловое приложение, которое я пытаюсь получить из контроллера, и оно не работает.

HTML

<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItems.name }}</h2>
<div class="hf">Buy it: {{ shopItems.price }}</div>
<div class="hff">Earn it: {{ shopItems.altprice }}</div>
<div class="desc"><div>{{ shopItems.desc }}</div></div>
<div class="prog"><div>{{ shopItems.progress }}</div></div>
</div>
</div>
</div>

, а вот контроллер

var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);

shopItems.controller('shopItemController', function ($scope) {
    $scope.shopItems = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 1.',
            prog: '50%'
        },{
            //id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 2.',
            prog: '50%'
        },{
            //id: 03,
            name: 'Three',
            //img: '',
            price: '$17.99',
            altprice: '12 miles',
            desc: 'This is a fake description 3.',
            prog: '100%'
        },{
            //id: 04,
            name: 'Four',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 4.',
            prog: '100%'
        }];
});

Я не понимаю, почему это не работает.Я построил это некоторое время назад, и я понятия не имею, почему это перестало работать.Я просто хочу, чтобы HTML заполнялся объектами в контроллере.Я пытаюсь построить угловой объект для моего онлайн-портфолио.У меня для этого тоже есть скрипка.

https://jsfiddle.net/galnova/jrtto5kj/6/

Answer 1

В третьей строке HTML-кода у вас есть

<div class="itm" ng-repeat="shopItem in shopItems">

shopItems - список объектов / массивов, которые вы просматриваете с помощью ng-repeat.На каждой итерации отдельный элемент затем сохраняется в shopItem .Чтобы сделать это различие более заметным, мы могли бы изменить приведенный выше HTML-код на:

<div class="itm" ng-repeat="currentProduct in arrayOfProducts">

Переименованный таким образом, было бы более интуитивно понятно, что при попытке отобразить продукт вы могли быиспользуйте currentProduct.price , currentProduct.desc и т. д. Ваш код не работает, потому что (используя мой переименованный пример) вы пытаетесь отобразить arrayOfProducts.price - свойство, которое не существует.

Answer 2

Вы получаете доступ к объекту с помощью ng-repeat.Вы должны получить доступ к экземпляру цикла shopItem

Вот обновленное fiddle

var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);

app.controller('shopItemController', function ($scope) {
    $scope.shopItems = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 1.',
            prog: '50%'
        },{
            //id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 2.',
            prog: '50%'
        },{
            //id: 03,
            name: 'Three',
            //img: '',
            price: '$17.99',
            altprice: '12 miles',
            desc: 'This is a fake description 3.',
            prog: '100%'
        },{
            //id: 04,
            name: 'Four',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 4.',
            prog: '100%'
        }];

});

h2 { padding: 0; margin: 0; margin-bottom: 10px; padding-bottom: 10px; text-align: center; border-bottom: solid 1px #000; }

.itm { 
    border: solid 4px #000;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    min-width: 150px;
}

.itm div { width: 100%; }
.itm .hf, .itm .hff { cursor: pointer; text-align: center; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px; float: left; width: 50%; }

.itm .hf { background-color: #ddd; }
.itm .hff { background-color: #ccc; }

.itm .desc { background: #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 10px; margin-top: 0px; overflow: hidden; }
.itm .desc div { padding: 0 10px 10px 10px; }

.itm .prog { min-height: 20px; background: #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding-top: 10px; overflow: hidden; }
.itm .prog div { text-align: center; color: #fff; }

.imag { background: #777; min-width: 150px!important; height: 200px!important; margin: auto; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItem.name }}</h2>
<div class="hf">Buy it: {{ shopItem.price }}</div>
<div class="hff">Earn it: {{ shopItem.altprice }}</div>
<div class="desc"><div>{{ shopItem.desc }}</div></div>
<div class="prog"><div>{{ shopItem.progress }}</div></div>
</div>
</div>
</div>