angularjs - Display content from multiple json on to a single div using ng-repeat -
here scenario. have 3 separate json objects. want have 3 object values displayed in single div. i.e (first values of imagelist, headinglist , pricelist in first div , second). trying use ng-repeat 1 shown below. shows error. there other way can achieve this?
<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>
below 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 }]; });
you can values using $index
property of ng-repeat.
Comments
Post a Comment