AngularJS Quiz App Tutorial (4/24) - Bootstrap Modal Markup

Показать описание

The writeup for this video:

Part 1 of this series:

The Git Repo for this project:

Now that the markup for the list of turtles is nearing completion it is time to create the bootstrap markup for the "learn more" popup. In bootstrap this sort of popup area is known as a modal.

In this video we will be creating the bootstrap modal markup and then populating it with the data from the turtle that the user clicked "learn more" on.

To do this, we need to create another property on our controller that will contain the data for the "active turtle", which will be the turtle the user wants to learn more about. We then need to populate the active turtle property everytime the user clicks the learn more button on one of the turtles.

This property is then what we will use to populate the modal inside our angular application.

Support Me On Patreon

One Off Donations:

Bitcoin: 39iDX27ZSkYtRhUrH5r5YN128wEjwDmSYp
Ethereum: 0x38b3cBF8Ee3EeeeA33D1925bA0ce0e90c8EcFD46
Horizen (ZEN): znanBCHpWJecBwZZmft9r5QzbzRX4nQn6Dz

Check Out The Site!

SUBSCRIBE!

Join the Community!

Рекомендации по теме

Комментарии

That was well done man!!!thanks for taking the time!!!
Please more angular tutorials, I don't wanna abuse your generosity!!thanks a lot man!!!

leandrodossantos

Amazing ! Waiting for your next project in AngularJS 2

דניאללביא

Thanks so much for the tutorial Andrew! Very useful and concise! :)

GiuseppeTavella

These are very well taught tutorials. Thank you very much!

victorhall

Thank you so much the best tutorial on Angularjs so far.

Slayersoft

Great stuff. Just a comment: there might be an issue with one of the images in the JSON data. The first Green Turtle image seems to be broken. Maybe a hosting issue? Other images work perfectly. Thanks.

doobiesoda

Nice Teaching method and nice material Sir. pls keep posting such useful material. Thx

alokranjan

For those of you having modal issues:
This stems from the order of which you include jquery and your bootrap. The js bootstrap inclusion requres jquery to be present before hand.
Here is the order from which I have my application currently running:





DannyJay

The way tutorial carried out is simple and straight, best resource for beginners. I just wanted to know, how different is Angular2 from Angular in regarding to all the angularjs components used in this app.

vidwathmysuru

Sir, Thank you so much for the tutorial. I have only one issue, My modal is not popping up and i am unable to resolve it. Need your help!

<!DOCTYPE html>
<html lang="en" ng-app="turtleFacts">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Turtle Facts Quiz</h1>
<h3>
Learn About all the turtles below before you decide to take on the
<strong>TURTLE QUIZ</strong>
</h3>
</div>
<div ng-controller="listCtrl as list">
<div class="row">
<div class="col-sm-6" ng-repeat="turtle in list.data">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{turtle.image_url}}" class="img-rounded img-responsive">
</div>
<div class="col-md-6">
<h4>{{turtle.type}}</h4>
<p><strong>Locations:
<p><strong>Size: </strong>{{turtle.size}}</p>
<p><strong>Average LifeSpan:
<p><strong>Diet: </strong>{{turtle.diet}}</p>
<button class="btn btn-primary pull-right"
data-toggle="modal"
data-target="#turtle-info"
More</button>
</div>
</div>
</div>
</div>
</div>

<div class="modal" id="turtle-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-6">
<p><strong>Locations:
<p><strong>Size:
<p><strong>Average Lifespan:
<p><strong>diet:
</div>
</div>
</div>
</div>
</div>

</div>
</div>
<script
<script
<script
<script src="js/app.js"></script>
<script

</body>
</html>

MrSANDESH

Hi,
I guess my modal isn't working, can you help.Thanks in advance

ChintuPrashanth

I'm using exact code like here but my modal size is not what i expected, it covers all the area of the window when on Maximum windowsize of the browser and my header part and body part is also not there i mean no data is retrieved from json.

UMLRAI

HI, Nice tutorials..easy to understand..i have a small query..here in this tutorial you have used 'this'..instead of $scope..and on controller you have used alias.. like listCtrl as list.. i have tried this whole code..it worked awesome.. while when i tried using $scope.. as usual angular practice..i am not able get output.. any help or procedure will really help me..in trying the other way also..
Thanks

bcools

Hi, I can't see how you've centred the page in that way. I have followed the tutorial exactly and my container takes up the entire width of the page.

JK-

.img responsive has the attribute height: auto;
and overrides the .well-image height: 160px attribute

I used

.well-image{
width:100%;
height: 162px !important;
}

to solve this issue, maybe it can help others

DnaiFrance

Do i need javascript to create a modal?

Leokev

Hi there, tanks for these excellent tuto, really i learn more faster than angularjs doc whith you ! :). Ok my function changeActiveMonument does not work i don't know why, can you help me ? the popup modal works but is blank, the datas are not displayed. no error message

This is the html code :
<div ng-controller="listDataCtrl as listData">
<div class="row">
<div class="col-sm-6" ng-repeat="monument in listData">
<div class="well well-sm">
<div class="row blockHeight">
<div class="col-md-6">
<img ng-src="{{ monument.urlImg }}" class="img-responsive" alt="{{ monument.altImg + ' ' + monument.nameOfStructure }}" title="{{ monument.nameOfStructure }}">
</div>
<div class="col-md-6">
<h4><strong>{{ monument.nameOfStructure }}</strong></h4>
<p><strong>Année de construction :</strong> {{ monument.yearOfConstruct }}</p>
<p><strong>Hauteur :</strong> {{ monument.pinacleHeight }}</p>
<p><strong>Type de structure :</strong> {{ monument.typeOfStructure }}</p>
<p><strong>Fonctions de la structure :</strong> {{ monument.functionOfStructure.join(', ') }}</p>
<p><strong>Pays :</strong> {{ monument.country }}</p>
<p><strong>Ville :</strong> {{ monument.city }}</p>
<button class="btn btn-primary btn-small pull-right" data-toggle="modal" savoir plus</button>
</div>
</div>
</div>

</div>
</div>
<div class="modal" id="monument-info">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<h2>{{ }}</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img ng-src="{{ }}" class=" img-rounded img-responsive">

This is the controller code :
(function(){
angular
.module("appQuiz")
.controller("listDataCtrl", listDataController);

function listDataController($scope, $http) {

.then(function(response) {
$scope.listData = response.data;
});
var thislistDataCtrl = this; // représente le controller listDataCtrl (memoire globale)
= {};
= changeActiveMonument;

function changeActiveMonument(index) {
= index;
console.log(index);

}
};
})();

karinek

my modal is not working it is not popping up.

brahimkraiem

AngularJS Quiz App Tutorial (4/24) - Bootstrap Modal Markup

AngularJS Quiz App Tutorial (4/24) - Bootstrap Modal Markup

AngularJS Quiz App Tutorial (24/24) - Finalising Our Quiz Application

AngularJS Quiz App Tutorial (3/24) - Data Binding and Bootstrap Markup

AngularJS Quiz App Tutorial (2/24) - Controller Properties and $scope

AngularJS Quiz App Tutorial (20/24) - More Bootstrap markup

AngularJS Quiz App Tutorial (12/24) - Controller Logic For The Quiz

AngularJS Quiz App Tutorial 01 24 Build An AngularJS Quiz App From Scratch

AngularJS Quiz App Tutorial (5/24) - Ng Model and Angular Filters

AngularJS Quiz App Tutorial (7/24) - AngularJS Factories and Services

AngularJS Quiz App Tutorial (11/24) - More Bootstrap Styling

AngularJS Quiz App Tutorial (19/24) - Building another Controller

AngularJS Quiz App Tutorial (6/24) - Ng-click and ng-show directives

AngularJS Quiz App Tutorial (17/24) - Final Prompt After The Quiz

AngularJS Quiz App Tutorial (21/24) - Markup and Controller Logic Results

AngularJS Quiz App Tutorial (10/24) - Ng-Class Directive

AngularJS Quiz App Tutorial (13/24) - ng-if Directive

AngularJS Quiz App Tutorial (15/24) - Image Feedback and Code Reuse

AngularJS Quiz App Tutorial (18/24) - Marking the Quiz Inside a factory method

AngularJS Quiz App Tutorial (14/24) - $index For Ng-Repeat

AngularJS Quiz App Tutorial (16/24) - Basic Error Handling with Bootstrap Alerts

Build An AngularJS Quiz App From Scratch (1/24) - Tutorial Course

Quiz Application from Scratch | Angular 15 | Angular step-by-step Project

JS Web apps - Angularjs - Seed a lot syllabuses - speed test

laravel 4 and angularjs duration app demo edit and update with bootstrap's modal