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

您正在使用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>

Answer 2

在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 -一个不存在的属性。

角度模块不起作用

2 个答案: