the whole side is getting duplicated whenever i fetch details from my database - django-models

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Myshop</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<style>
.head{
font-family: 'Abel', sans-serif;
}
</style>
{% load static %}
{%for product_list in product_list%} after adding this code the webpage is getting duplicated
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<h1 class="head text-center m-4">Premium Watchs</h1>
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="A Street in Europe">
<div class="card-body">
<h5 class="card-title">{{product_list.0.Product_name}}</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="London">
<div class="card-body">
<h5 class="card-title">London</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="New York">
<div class="card-body">
<h5 class="card-title">New York</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
{%endfor%}
table
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
i am freshener learning django and i am not able to fetch the data from the database so please help me to solve this problem
i want to fetch data from my database to my website
after adding this line of code the webpage is getting duplicated
{%for product_list in product_list%}
models.py
this the code where i created the database it has very random fields as i am making this website to learn django
from django.db import models
class Product(models.Model):
product_id=models.AutoField
product_name=models.CharField(max_length=50)
category=models.CharField(max_length=50, default='')
sub_category=models.CharField(max_length=50, default='')
desc = models.CharField(max_length=500)
price = models.IntegerField(default=0)
pub_date=models.DateField()
images = models.ImageField(upload_to="shop/images",default='')
def __str__(self):
return self.product_name

Related

Tabs navigation issue with search button?

We have two tabs 1st one is search filter and the 2nd one results tab. Where all the result is showing. When we click on the search button then the result tab is active and navigate successfully.
But when we click on the search tab and then click on the search button then the result tab is not active.
I am trying through the active and inactive class. but now working.
<ul class="nav nav-tabs">
<li ng-class="{'active': activeFilters}"><a data-toggle="tab" href="{{url}}#filter">Filter</a></li>
<li ng-class="{'active': activeResults}"><a data-toggle="tab" href="{{url}}#results">Results</a></li>
</ul>
In ts file
$scope.activeFilters = false;
$scope.activeResults = true;

Add data-target along with data-toggle. See below snippet that might help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#home">Home</a></li>
<li><a data-toggle="tab" data-target="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" data-target="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" data-target="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>

cards lose their position when on new line in ng-repeat (AngularJS)

I am looping thru items with ng-repeat. Here is the code:
<div class="row"
<div class="w3-card-3 col-xs-18 col-sm-6 col-md-3" ng-repeat="p in products">
<div class="thumbnail">
<img ng-src="{{p.img}}" alt="...">
<div class="caption">
<h4 class="text-danger">{{p.brand}}</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<a href="car/{{ p.id }}" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i>
</a> Info
Bid
</div>
</div>
</div>
My problem is that when the repeater enters a new line the cards generated gets messed up. Here's an image of the problem:
What's wrong with my code? Why won't the cards align underneath each other. Tell me if there is anything else you want to see.

use height of image and description wrapper it should solve the problem

Try to add style="float: left" in the div below:
<div class="thumbnail" style="float: left">

AngularJs & Cannot read property of 'SetNavBanner' of undefined

I'm working on a simple single page application using angular. I have one module and several different controllers. Within my module I have a factory service that sets on css on the page. The factory service is called within each of the different controllers. When the factory service is called from a controller, I get the following error:
"Cannot read property 'SetNavBanner' of undefined.
My code is posted below, Please help. Thank you in advance.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
app/appMod.js
var app = angular.module("appMod", ["ngRoute"])
app.factory('NavBannerService', function(){
function _setNavBanner(NavElementItem){
/* Change the active element to the Blog li element. */
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
alert(NavElementItem)
if(navLIs[a].id == NavElementItem)
{
alert(NavElementItem)
navLIs[a].className = "active";
}
}
};
return{
SetNavBanner: _setNavBanner
};
});
/* Configure the Routes*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "app/home/home.html", controller: "HomeCtrl" })
.when("/Blog", {templateUrl: "app/blog/blog.html", controller: "BlogCtrl"})
.otherwise({ redirectTo: '/' });
/*.when("/SearchByEmployees", { templateUrl: "Search/SearchByEmployees.html", controller: "SearchByEmpCtrl" })
.when("/Procurements", { templateUrl: "Procurements/ProcurementView.html", controller: "ProcurementCtrl" })
.when("/Participants", { templateUrl: "Participants/ParticipantsSummaryView.html", controller: "ParticipantsCtrl" })*/
}]);
home/HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
NavBannerService.SetNavBanner("liHome");
}]);
home/home.html
<div ng-controller="HomeCtrl">
<div class="slider">
<img src="img/bg-main1.jpg" alt="" class="img-responsive" />
</div>
<!-- column content -->
<div id="main-content">
<div class="container">
<div class="row">
<div class="big-box">
<div class="col-lg-12">
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.9s">
<div class="align-center">
<i class="fa fa-camera-retro fa-5x"></i>
<h4 class="text-bold">Customizable</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.6s">
<div class="align-center">
<i class="fa fa-shield fa-5x"></i>
<h4 class="text-bold">Valid HTML5</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.2s">
<div class="align-center">
<i class="fa fa-circle fa-5x"></i>
<h4 class="text-bold">Responsive</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="wow bounceInRight">
<div class="col-lg-6">
<h4>Maecenas luctus</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.</p>
<a href="#" class="thumbnail">
<img src="img/thumbnails/outline-1.jpg" alt="">
</a>
</div>
</div>
<div class="wow bounceInLeft">
<div class="col-lg-6">
<h4>Maecenas luctus</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.</p>
<a href="#" class="thumbnail">
<img src="img/thumbnails/ipad.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end column content -->
</div>
blog/BlogCtrl.js
app.controller('BlogCtrl', ['$scope', function($scope,NavBannerService){
new WOW().init();
NavBannerService.SetNavBanner("liBlog");
//anglar.element(document).find('')
}]);
blog/blog.html
<div ng-controller="BlogCtrl">
<div class="row mar-bot40">
<div class="col-md-offset-3 col-md-6">
<div class="sections-header">
<h2>Blog</h2>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit, sed quia non numquam.</p>
</div>
</div>
</div>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-8">
<article>
<div class="post-image">
<div class="post-heading">
<h3>This is an example of standard post format</h3>
</div>
<img src="img/portfolio/img1.jpg" alt="" />
</div>
<p>
Qui ut ceteros comprehensam. Cu eos sale sanctus eligendi, id ius elitr saperet, ocurreret pertinacia pri an. No mei nibh consectetuer, semper laoreet perfecto ad qui, est rebum nulla argumentum ei. Fierent adipisci iracundia est ei, usu timeam persius ea. Usu ea justo malis, pri quando everti electram ei, ex homero omittam salutatus sed.
</p>
<div class="bottom-article">
<ul class="meta-post">
<li><i class="icon-calendar"></i> Mar 23, 2013</li>
<li><i class="icon-user"></i> Admin</li>
<li><i class="icon-folder-open"></i> Blog</li>
<li><i class="icon-comments"></i>4 Comments</li>
</ul>
Continue reading <i class="icon-angle-right"></i>
</div>
</article>
<article>
<div class="post-video">
<div class="post-heading">
<h3>Amazing video post format here</h3>
</div>
<div class="video-container">
<iframe src="http://player.vimeo.com/video/30585464?title=0&byline=0">
</iframe>
</div>
</div>
<p>
Qui ut ceteros comprehensam. Cu eos sale sanctus eligendi, id ius elitr saperet, ocurreret pertinacia pri an. No mei nibh consectetuer, semper laoreet perfecto ad qui, est rebum nulla argumentum ei. Fierent adipisci iracundia est ei, usu timeam persius ea. Usu ea justo malis, pri quando everti electram ei.
</p>
<div class="bottom-article">
<ul class="meta-post">
<li><i class="icon-calendar"></i> Mar 23, 2013</li>
<li><i class="icon-user"></i> Admin</li>
<li><i class="icon-folder-open"></i> Blog</li>
<li><i class="icon-comments"></i>4 Comments</li>
</ul>
Continue reading <i class="icon-angle-right"></i>
</div>
</article>
<div id="pagination">
<span class="all">Page 1 of 3</span>
<span class="current">1</span>
2
3
</div>
</div>
<div class="col-lg-4">
<aside class="right-sidebar">
<div class="widget">
<form class="form-search">
<input class="form-control" type="text" placeholder="Search..">
</form>
</div>
<div class="widget">
<h5 class="widgetheading">Categories</h5>
<ul class="cat">
<li><i class="icon-angle-right"></i>Web design<span> (20)</span></li>
<li><i class="icon-angle-right"></i>Online business<span> (11)</span></li>
<li><i class="icon-angle-right"></i>Marketing strategy<span> (9)</span></li>
<li><i class="icon-angle-right"></i>Technology<span> (12)</span></li>
<li><i class="icon-angle-right"></i>About finance<span> (18)</span></li>
</ul>
</div>
<div class="widget">
<h5 class="widgetheading">Latest posts</h5>
<ul class="recent">
<li>
<img src="img/blog/1.jpg" class="pull-left" alt="" />
<h6>Lorem ipsum dolor sit</h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
<li>
<img src="img/blog/2.jpg" class="pull-left" alt="" />
<h6>Maiorum ponderum eum</h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
<li>
<img src="img/blog/3.jpg" class="pull-left" alt="" />
<h6>Et mei iusto dolorum</h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
</ul>
</div>
<div class="widget">
<h5 class="widgetheading">Popular tags</h5>
<ul class="tags">
<li>Web design</li>
<li>Trends</li>
<li>Technology</li>
<li>Internet</li>
<li>Tutorial</li>
<li>Development</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</section>
</div>
EDIT:
After updating my factor service this, then it worked:
app.factory('NavBannerService', function(){
var SetNavBanner = function(NavElementItem){
/* Change the active element to the Blog li element.*/
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
if(navLIs[a].id == NavElementItem)
{
navLIs[a].className = "active";
}
}
};
return {SetNavBanner: SetNavBanner};
});
Why would that work, instead of this?
app.factory('NavBannerService', function(){
this. SetNavBanner = function(NavElementItem){
/* Change the active element to the Blog li element.*/
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
if(navLIs[a].id == NavElementItem)
{
navLIs[a].className = "active";
}
}
};
});

Change your controller to the following :-
app.controller('HomeCtrl', ['$scope','NavBannerService', function($scope,NavBannerService){
NavBannerService.setNavBanner("liHome");
}]);
Refer angular Doc # dependency Injection :-
https://docs.angularjs.org/guide/di
Thanks

In your controller, you used the array syntax (which is recommended) but you forgot to add the factory in the array.
instead of: home/HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
NavBannerService.SetNavBanner("liHome");
}]);
you need: home/HomeCtrl.js
app.controller('HomeCtrl', ['$scope', 'NavBannerService', function($scope,NavBannerService){
NavBannerService.SetNavBanner("liHome");
}]);
Because of that, when you try to access an inner function, the object is empty since it wasn't imported

Bootstrap 3 Toggable tabs displaying the wrong tab on mobile devices

I'm implementing a content tabbed section using Bootstrap 3 and it works fine for almost all resolutions except mobile. For some reason only on mobile devices the default active tab is the last one called "All", but the content it displays comes from the first tab ("Popular").
It works perfect on bigger resolutions like iPad or desktop. In this case the default active tab is the first one called "Popular" and the displayed content is correct.
Could you please help me to figure it out what is the problem?
<section class="solution-tabs section-tabs">
<div class="container no-padding">
<ul class="nav nav-tabs" role="tablist">
<li class="col-sm-3 active">Popular</li>
<li class="col-sm-3">Industries</li>
<li class="col-sm-3">Topics</li>
<li class="col-sm-3">All</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tabPopular">
<div class="container">
<div class="row">
Popular tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, est quae quo magnam deserunt facere!
</div>
</div>
</div>
<div class="tab-pane fade" id="tabIndustries">
<div class="container">
<div class="row">
Industries tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, corporis obcaecati eos vero aliquam sit?
</div>
</div>
</div>
<div class="tab-pane fade" id="tabTopics">
<div class="container">
Topics tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus ratione iusto officiis sint quaerat totam.
</div>
</div>
<div class="tab-pane fade" id="tabAll">
<div class="container">
<div class="row">
All tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, fugit fuga doloremque minima ducimus ratione.
</div>
</div>
</div>
</div>
</section>

angularjs mobile ui multiple modals not working

I am implementing 3 different modals in the same view,
but only the one that's placed last could be activated.. my code:
<div ui-content-for="modals">
<div class="modal" ui-if="blockPersonModal" ui-state='blockPersonModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="blockPersonModal">×</button>
<h4 class="modal-title">Block</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="blockPersonModal" class="btn btn-default">Close</button>
<button ui-turn-off="blockPersonModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="RequestIdentificationModal" ui-state='RequestIdentificationModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="RequestIdentificationModal">×</button>
<h4 class="modal-title">Request Identification</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="RequestIdentificationModal" class="btn btn-default">Close</button>
<button ui-turn-off="RequestIdentificationModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="ReportModal" ui-state='ReportModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="ReportModal">×</button>
<h4 class="modal-title">Report</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="ReportModal" class="btn btn-default">Close</button>
<button ui-turn-off="ReportModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
if I am changing the order of the modals in my code, still only the last one will show up.
how can I define three different modals in the new angularjs mobile ui?
unfourtanatley, the docs lacks clear information about how to do such a thing.
thanks,
Yonatan.

Found the problem.
The correct way to write multiple modals:
<div ui-content-for="modals">
<div class="modal">....</div>
<div class="modal">....</div>
<div class="modal">....</div>
</div>
Instead of:
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>

Resources