Question

这是我的情景。我有3个独立的json对象。我希望将所有3个对象值显示在一个div中。即（第一个div中的imageList，headingList和priceList的第一个值，类似地第二个）。我正在尝试使用如下所示的ng-repeat。但它显示错误。还有其他方法可以达到这个目的吗？

<div ng-controller="bannerController">
    <div ng-repeat="image in imageList, heading in headingList, price in priceList">
        <div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
             <h1>{{heading.title}}</h1>

            <p>{{price.price}}</p>
        </div>
    </div>

以下是index.html和script.js

的index.html

<!DOCTYPE html>
<html ng-app="myApp">

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">

        </script>
        <script src="script.js"></script>
        <title>Angular Test</title>
    </head>

    <body>
        <div ng-controller="bannerController">
            <div ng-repeat="image in imageList">
                <div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
                        <h1>{{heading.title}}</h1>

                </div>
            </div>
        </div>
    </body>

</html>

的script.js

var myApp = angular.module('myApp', []);

myApp.controller('bannerController', function ($scope) {
    $scope.imageList = [{
        url: 'some Url 1'
    }, {
        url: 'some url 2'
    }];

    $scope.headingList = [{
        title: 'Title',
        subtitle: 'Subtitle'
    }, {
        title: 'Title',
        subtitle: 'Subtitle'
    }];

    $scope.priceList = [{
        price: 2
    }, {
        price: 3
    }];
});

Answer 1

您可以使用ng-repeat的$index属性获取值。

plunker link

使用ng-repeat将多个json中的内容显示到单个div

1 个答案: