I am using modal popup with fullcalendar jquery plugin to display my event details on my ASP.NET mvc application and I get my json events from the database. In the event details in the popup, I display the details using jquery.text() methods; I have a url as part of the event data details, how do i make this url clickable to open in another tab in the modal pop up.
<h2>Organiser</h2>
<html>
<head>
<meta charset='utf-8' />
<link href='~/Content/Site.css' rel='stylesheet' />
<link href='~/Content/main.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
contentHeight: 820,
weekends: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listMonth'
},
defaultView: 'dayGridMonth',
eventLimit: true, // allow "more" link when too many events
eventClick: function (arg) {
$('#modalBody > #title').text(arg.event.title);
$('#modalSchool').text(arg.event.extendedProps.school);
$('#modalYear').text(arg.event.extendedProps.year);
$('#modalStaffs').text(arg.event.extendedProps.staffs);
$('#modalDescription').text(arg.event.extendedProps.description);
$('#modalWhen').text(arg.event.start);
$('#modalEnd').text(arg.event.end);
$('#modalRecord').text(arg.event.extendedProps.recordID);
$('#modalUrl').text(arg.event.extendedProps.url);
$('#calendarModal').modal();
//var $link = $('div#modalUrl');
//$('.modalUrl').click(function () {
// window.open($link)
//});
},
events: function (fetchInfo, successCallback, failureCallback) //function to run whenever the calendar needs events
{
$.ajax({
type: "GET",
url: '#Url.Action("GetData", "Home")',
data: { start: fetchInfo.startStr, end: fetchInfo.endStr },
success: function (data) {
var events = [];
$.each(data, function (i, v) {
events.push({
title: v.School,
start: moment(v.Date).format("YYYY-MM-DD HH:mm"),
end: moment(v.EndTime).format("YYYY-MM-DD HH:mm"),
color: v.Color,
backgroundColor: v.Background,
allDay: v.FullDay,
extendedProps: {
description: v.EventType,
staffs: v.Staffs,
recordID: v.Record,
url: v.URL
}
});
});
successCallback(events); //pass the events back to fullCalendar
},
error: function (error) {
alert('fetching events failed');
console.log(error);
failureCallback(error);
}
});
}
});
calendar.render();
});
</script>
<style>
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1120px;
margin: 40px auto;
}
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc .fc-toolbar-title {
font-size: 1.3em !important;
margin: 0;
}
.fc .fc-button {
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id='calendar' style="margin-top: 20px; "></div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight: 700;">Event Details</h4>
</div>
<div id="modalBody" class="modal-body">
<div id="modalDescription" style="margin-top:2px;"> <h4> At </h4></div>
<div id="modalSchool" style="margin-top:2px;"></div>
<h4 class="modal-title">On:</h4>
<div id="modalWhen" style="margin-top:2px; white-space:nowrap; overflow: hidden; max-width: 128pt;"></div>
<h4 class="modal-title">To</h4>
<div id="modalEnd" style="margin-top:2px; white-space:nowrap; overflow: hidden; max-width: 128pt;"></div>
<h4 class="modal-title">Staff Members Booked:</h4>
<div id="modalStaffs" style="margin-top:2px;"></div>
<h4 class="modal-title" style=" width: 20%; float: left;">Record ID:</h4>
<div id="modalRecord" style="margin-top:2px;"></div>
<h4 class="modal-title">Url</h4>
<div id="modalUrl" style="margin-top:2px;"></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have to unsuccessfully wrap the in ahref tag, also unsuccessfully tried to use onclick.
You can write the URL into the href property of an <a href element, so it forms a hyperlink.
It could be something simple like:
$('#modalUrl').html("<a href='" + arg.event.extendedProps.url + "'>" + arg.event.extendedProps.url + "</a>");
So I am currently designing and creating a one-paged bootstrap website. I am trying to add an event calendar to the website. However, whenever I insert it to the HTML code (see the code below), it does not load at all. Here is a link to the calendar widget code: https://codepen.io/seebrosky/pen/zmejgg. How do I integrate it into the website properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<style type="text/css">
body,td,th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
</style>
<!-- Calendar-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">Club</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- Calendar -->
<!--
<div class="container text-center">
<h2 class="mx-auto mb-5">Calendar</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a>
</div>-->
<section class="content-section" style="background: #9045CB; color: white" id="get-involved">
<h2 class="mx-auto mb-5">Calendar</h2>
<div class="container text-center">
<head>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* className colors
className: default(transparent), important(red), chill(pink), success(green), info(blue)
*/
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendar = $('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
editable: true,
firstDay: 0, // 1(Monday) this can be changed to 0(Sunday) for the USA system
selectable: true,
defaultView: 'month',
axisFormat: 'h:mm',
columnFormat: {
month: 'ddd', // Mon
week: 'ddd d', // Mon 7
day: 'dddd M/d', // Monday 9/7
agendaDay: 'dddd d'
},
titleFormat: {
month: 'MMMM yyyy', // September 2009
week: "MMMM yyyy", // September 2009
day: 'MMMM yyyy' // Tuesday, Sep 8, 2009
},
allDaySlot: false,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: 'info'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: 'info'
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
className: 'important'
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: 'important'
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'https://ccp.cloudaccess.net/aff.php?aff=5188',
className: 'success'
}
],
});
});
</script>
<style>
body {
margin-bottom: 40px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Open Sans", sans-serif;
background: url(http://www.digiphotohub.com/wp-content/uploads/2015/09/bigstock-Abstract-Blurred-Background-Of-92820527.jpg);
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event {
/* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
/* float: right; */
margin: 0 auto;
width: 900px;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 0 1px 2px #C3C3C3;
-webkit-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
}
</style>
</head>
<body>
<div id="wrap">
<div id="calendar"></div>
<div style="clear:both"></div>
</div>
</body>
</div>
</section>
<!-- Callout -->
<section class="callout">
<div class="container text-center">
<h2 class="mx-auto mb-5">Welcome to
<em>your</em>
next website!</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©Group 2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>
I have some code that looks like this
<div class="topnav">
<div>{{getGameView.Game.gameplayers[0].player.username}}</div>
<p>VS</p>
<div v-if="getGameView.Game.gameplayers.length > 1">
{{getGameView.Game.gameplayers[1].player.username}}
</div>
<div v-else>Waiting for opponent...</div>
</div>
Which prints this: NameVSName
I am trying to make it so that between Name and VS there is some space but cannot figure out how to do it.
A solution is to give to the VS element a class like .vs and add some padding to it:
p {
margin: 0;
}
.topnav {
display: flex;
}
.topnav .vs {
padding-right: 10px;
padding-left: 10px;
}
<div class="topnav">
<div>Name</div>
<p class="vs">VS</p>
<div>Name</div>
</div>
You can insert a space in html with .
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
nameA: "Job",
nameB: "Bob"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ nameA }} Vs {{ nameB }}
</div>
How to insert spaces/tabs in text using HTML/CSS
I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2
Here is my scenario. I have 3 separate json objects. I want to have all the 3 object values to be displayed in a single div. i.e (first values of imageList, headingList and priceList in first div and similarly second). I am trying to use ng-repeat like the one shown below. But it shows an error. Is there any other way I 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 are the index.html and 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 get values by using $index property of ng-repeat.
plunker link