Question

我正在尝试学习Angular并卡在下面的Image数组中。任何人都可以解释我的代码中的问题是什么以及如何解决这个问题？

FilterAndImages.html

<!DOCTYPE html>
<html ng-app="store">
<head>
<title>First Angular</title>
<link rel="stylesheet" type="text/css"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="container">
    <ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
        <li class="list-group-item">
            <h3> {{product.name}} </h3>
            <p> {{product.description}} </p>
            <img ng-src="{{product.images[0].full}}" />
            <em class="pull-right">
                {{product.price | currency}}
                <br><button ng-show="product.canPurchase"> Add to Cart </button>
            </em>
        </li>
    </ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="App.js"></script>
</body>
</html>

App.js

(function () {
var app = angular.module('store', []);

var gems = [{
    name: 'Ruby',
    price: 2.95,
    description: 'This is Ruby on Rails :)',
    canPurchase: true,
    images: [
        {
            full: 'full.png',
            thumb: 'thump.jpg'
        },
    ]
},
{
    name: "Black Pearl",
    price: 1.5,
    description: "Jack Sparrow !!",
    canPurchase: false,
    images: [
        {
            full: 'full.png',
            thumb: 'thump.jpg'
        },
    ],
}];

app.controller('StoreController', function () {
    this.products = gems;
});
})();

我真的很感谢你们。

Answer 1

我使用您的代码创建了一个plunker示例，它会生成订单，请在此处查看： https://plnkr.co/edit/uVDl51EyRuwNmj428it1?p=preview

而不是<ul class="list-group" ng-repeat="product in products | orderBy ='price'">

尝试使用＆＃39;：＆＃39;而不是＆＃39; =＆＃39;在orderby：

<ul class="list-group" ng-repeat="product in products | orderBy :'-price'">

Answer 2

其中一个问题就在于你调用orderBy过滤器的方式。

<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">

应该成为：

<ul class="list-group" ng-repeat="product in store.products | orderBy: 'price'">

有关此功能的更多选项，请参阅official documentation。

Answer 3

试试这个

app.controller('StoreController', function ($scope) {
    $scope.products = gems;
});

如何在AngularJS中修复ImageArray加载

3 个答案: