I am struggling to get one of my template components to render. I am sure the mistake is simple but I am having trouble finding a solution since I am new to VueJS. My header shows up just fine but my Questions component is invisible.
Any help would be appreciated. Thank you.
Here is the code.
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Lionsfield Placement Quiz</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<style>
.is-loading {
background: cyan;
}
</style>
</head>
<body>
<div class="space-top container shadow" align="center">
<div id="app">
</div>
</div>
<script src="/index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
App.vue
<template>
<div id="app">
<HeaderSection />
<QuestionSection />
</div>
</template>
<script>
import HeaderSection from "./components/HeaderSection";
import QuestionSection from "./components/QuestionSection";
export default {
name: "App",
components: {
HeaderSection,
QuestionSection
}
};
</script>
HeaderSection.vue
<template>
<div>
<img class="logo" src="/img/lion.png" alt />
<h1 id="heading-top">Lionsfield English Quick Placement Quiz</h1>
</div>
</template>
<script>
export default {
name: "HeaderSection"
};
</script>
QuestionSection.vue
<template>
<div>
<div v-for="(question, index) in quiz.questions" v-bind:key="question.id">
<div v-show="index === questionIndex">
<h2 id="question-text">{{ question.text }}</h2>
<div class="row">
<ul>
<li
class="col-sm-12 col-md-12 col-lg-6"
v-for="(response, index2) in question.responses"
v-bind:key="response.text"
>
<div class="btn-group btn-group-toggle">
<label class="btn btn-red btn-block quesion-b">
<input
type="radio"
v-bind:value="response.correct"
v-bind:name="index"
v-bind:id="index2"
v-bind:class="{ active: isActive }"
v-model="userResponses[index]"
#click="select();next();roundProg()"
checked
/>
{{response.text}}
</label>
</div>
</li>
</ul>
<div class="progress">
<div
class="progress-bar bg-red"
role="progressbar"
:style="{ width: myWidth + '%' }"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
>{{prog}}%</div>
</div>
</div>
<button
type="button"
class="btn btn-primary mb-5 btn-sm"
v-if="questionIndex > 0"
v-on:click="prev();roundProg()"
>Previous Question</button>
<!-- <button type="button" class="btn btn-primary btn-sm" v-on:click="next();roundProg()">
Next Question
</button>-->
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h2>You did Amazing job {{quiz.user}}!!!</h2>
<p>
<!--Total score: {{ score() }} / {{ quiz.questions.length }}-->
Total score: {{ score() }}%
</p>
</div>
</div>
</template >
<script>
let quiz = {
user: "English Learner",
questions: [
{
id: 0,
text: "What _______ your job?",
responses: [
{ text: "are" },
{ text: "is", correct: true },
{ text: "be" },
{ text: "have" }
]
},
{
id: 1,
text: "Lynn _______ at home at the moment.",
responses: [
{ text: "works" },
{ text: "is working", correct: true },
{ text: "work" },
{ text: "are working" }
]
},
{
id: 2,
text: "We have ______ information about that.",
responses: [
{ text: "a lot of", correct: true },
{ text: "an" },
{ text: "any" },
{ text: "many" }
]
}
]
};
export default {
data: function() {
return {
quiz: quiz,
questionIndex: 0,
userResponses: Array(quiz.questions.length).fill(false),
isActive: false,
myWidth: 0,
prog: 0
};
},
methods: {
roundProg: function() {
this.prog = Math.round(this.myWidth);
},
select: function() {
isActive = true;
console.log(this);
},
next: function() {
this.questionIndex++;
this.myWidth = (this.questionIndex / quiz.questions.length) * 100;
},
prev: function() {
this.questionIndex--;
this.myWidth = (this.questionIndex / quiz.questions.length) * 100;
},
score: function() {
let n =
(this.userResponses.filter(function(val) {
return val;
}).length /
quiz.questions.length) *
100;
function truncate(num, places) {
return Math.trunc(num * Math.pow(10, places)) / Math.pow(10, places);
}
return truncate(n, 2);
}
}
};
</script>
index.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
My HeaderSection and QuestionSection are in the components folder located in the src folder
Syntax error. It is very usefull at first to open Developer Tools, and it saves more time if you use developement enviroment with lint checking like Visual Studio Code.
Must be:
let quiz = {
user: "English Learner",
questions: [
{
id: 0,
text: "What _______ your job?",
responses: [
{ text: "are" },
{ text: "is", correct: true },
{ text: "be" },
{ text: "have" }
]
},
{
id: 1,
text: "Lynn _______ at home at the moment.",
responses: [
{ text: "works" },
{ text: "is working", correct: true },
{ text: "work" },
{ text: "are working" }
]
},
{
id: 2,
text: "We have ______ information about that.",
responses: [
{ text: "a lot of", correct: true },
{ text: "an" },
{ text: "any" },
{ text: "many" }
]
}
]
};
Related
I will start using frappe gannt.
Even though I move task bar, progress and date not worked in custom_popup_html!
like these below.
before moving
[![enter image description here][1]][1]
after moving
[![enter image description here][2]][2]
Date doesn't be changed.
code relating the issue are described.
please help about this issue!!
thank you
'use strict'
function getView(view) {
gantt.change_view_mode(view);
}
let tasks = [
{
id: 'Task 1',
name: 'Redesign website',
start: '2022-1-28',
end: '2022-1-31',
progress: 20,
dependencies: ''
},
{
id: 'Task 2',
name: 'Redesign website',
start: '2022-2-2',
end: '2022-2-10',
progress: 20,
dependencies: 'Task 1'
},
{
id: 'Task 3',
name: 'Redesign website',
start: '2022-2-12',
end: '2022-2-20',
progress: 20,
dependencies: 'Task 2'
}
]
let gantt = new Gantt("#gantt", tasks, {
on_click: function (task) {
console.log(task);
},
on_date_change: function (task, start, end) {
console.log(task, start, end);
},
on_progress_change: function (task, progress) {
console.log(task, progress);
},
on_view_change: function (mode) {
console.log(mode);
},
custom_popup_html: function (task) {
return `
<div class="card" style="width: 10rem;">
<div class="card-body">
<h6>${task.name}</h6>
<p>Expected to finish by ${task.end}</p>
<p>${task.progress}% completed!</p>
</div>
</div>
`;
}
});
let btnContainer = document.getElementById("myButtonGrp");
let btns = btnContainer.getElementsByClassName("btn");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
<!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.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- frappe gannt -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.min.js"></script>
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href='style.css'>
</head>
<body>
<div class="shadow p-3 m-5 bg-body rounded">
<h2 class="border-bottom mb-4">Gannt chart</h2>
<svg id="gantt"></svg>
<div id="myButtonGrp" class="mx-auto mt-3 btn-group" role="group">
<button onclick="gantt.change_view_mode('Day')" type="button" class="btn btn-sm btn-light">Day</button>
<button onclick="gantt.change_view_mode('Week')" type="button" class="btn btn-sm btn-light active">Week</button>
<button onclick="gantt.change_view_mode('Month')" type="button" class="btn btn-sm btn-light">Month</button>
</div>
</div>
<script src="script.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
Here is a fixed version, it updates when you let go of the mouse
I added a span to your P
const getYYYYMMDD = date => date.toISOString().split("T")[0];
on_date_change: function(task, start, end) {
task.start = getYYYYMMDD(start);
task.end = getYYYYMMDD(end);
const cardEnd = document.getElementById("fEnd");
if (cardEnd) {
cardEnd.textContent = task.end;
}
},
'use strict'
const getYYYYMMDD = date => date.toISOString().split("T")[0];
function getView(view) {
gantt.change_view_mode(view);
}
let tasks = [{
id: 'Task 1',
name: 'Redesign website',
start: '2022-1-28',
end: '2022-1-31',
progress: 20,
dependencies: ''
},
{
id: 'Task 2',
name: 'Redesign website',
start: '2022-2-2',
end: '2022-2-10',
progress: 20,
dependencies: 'Task 1'
},
{
id: 'Task 3',
name: 'Redesign website',
start: '2022-2-12',
end: '2022-2-20',
progress: 20,
dependencies: 'Task 2'
}
]
let gantt = new Gantt("#gantt", tasks, {
on_click: function(task) {
// console.log(task);
},
on_date_change: function(task, start, end) {
task.start = getYYYYMMDD(start);
task.end = getYYYYMMDD(end);
const cardEnd = document.getElementById("fEnd");
if (cardEnd) {
cardEnd.textContent = task.end;
}
},
on_progress_change: function(task, progress) {
// console.log(task, progress);
},
on_view_change: function(mode) {
// console.log(mode);
},
custom_popup_html: function(task) {
return `
<div class="card" style="width: 10rem;">
<div class="card-body">
<h6>${task.name}</h6>
<p>Expected to finish by <span id="fEnd">${task.end}</span></p>
<p>${task.progress}% completed!</p>
</div>
</div>
`;
}
});
let btnContainer = document.getElementById("myButtonGrp");
let btns = btnContainer.getElementsByClassName("btn");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", () => {
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
<!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.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- frappe gannt -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.min.js"></script>
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href='style.css'>
</head>
<body>
<div class="shadow p-3 m-5 bg-body rounded">
<h2 class="border-bottom mb-4">Gannt chart</h2>
<svg id="gantt"></svg>
<div id="myButtonGrp" class="mx-auto mt-3 btn-group" role="group">
<button onclick="gantt.change_view_mode('Day')" type="button" class="btn btn-sm btn-light">Day</button>
<button onclick="gantt.change_view_mode('Week')" type="button" class="btn btn-sm btn-light active">Week</button>
<button onclick="gantt.change_view_mode('Month')" type="button" class="btn btn-sm btn-light">Month</button>
</div>
</div>
<script src="script.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
I have a code where I can add inputs, with #click="addInput()" .
Now I'm trying do delete these inputs as well with #click="deleteInput(). I've tried to do this with this.inputs.splice(index, 1) - but when I try this only my last input will be deleted.. but I don't know why..
How can I solve that, that my specific Input which I want to delete will be deleted?
The additional code in my inputs at addInput -> name is from child element
Thanks for helping me out!
my template:
<template>
<div >
<div class="mt-2" v-for="(id, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" v-b-toggle="toggleElementInChildVue" variant="danger"></b-button>
<b-button #click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button #click="addInput()">Add Input</b-button>
</div>
</div>
</template>
my script:
<script>
export default {
name: 'test',
data() {
return {
inputs: [{
name: "",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},
addInput() {
this.inputs.push({
name: "",
})
},
},
}
</script>
Looks like your delete method works, check snippet pls:
new Vue({
el: '#demo',
data() {
return {
inputs: [{
name: "aa",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},
addInput() {
this.inputs.push({
name: "bb",
})
},
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div >
<div class="mt-2" v-for="(name, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" variant="danger">{{name}}</b-button>
<b-button #click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button #click="addInput()">Add Input</b-button>
</div>
</div>
</div>
This is my first time using Vue. I am trying to create a slideshow from an array of images. I have am able to disable my "previous" button, when the user is at the beginning of the slideshow, but cannot disable my "next" button when at the last image of the slide show.
Here is my code:
Vue.config.devtools = true
var app = new Vue({
el: '#app',
data: {
title: 'Photo of the day!',
description: '',
images: [
{
image: 'https://cdn.spacetelescope.org/archives/images/wallpaper2/heic1509a.jpg', date: '1/9/2019', title: 'Beautiful Milky Way'
},
{
image: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA2MS8wNzUvb3JpZ2luYWwvY2hhbmRyYS1uZ2M2MzU3LWNvbXBvc2l0ZS5qcGc=', date: '1/10/2019', title: 'Amazing Whirlpool Galaxy'
},
{
image: 'https://icdn3.digitaltrends.com/image/space-engine-featured-510x0.jpg?ver=1', date: '1/11/2019', title: 'Wonderous Large Magellanic Cloud'
},
],
currentNumber: 0,
photosAvailable: true,
},
methods: {
next: function() {
app.currentNumber += 1;
if (app.currentNumber === app.images.length) {
console.log('SERGIO')
app.photosAvailable = false
return
}
},
previous: function() {
app.photosAvailable = true
return app.currentNumber -= 1
},
}
})
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anaheim" rel="stylesheet">
<meta charset="UTF-8">
<title>NASA Photo Of The Day</title>
</head>
<body>
<div id='app'>
<section class='hero'>
<h1 class='title'>{{ title }}</h1>
</section>
<section class='picture-area'>
<div class='info'>
<h2>{{ images[currentNumber].title }}</h2>
<p v-bind='description'>{{ description }}</p>
<img class='image-of-day' :src='images[currentNumber].image' />
<p class='date'>{{ images[currentNumber].date }}</p>
<button :disabled="!currentNumber" v-on:click="previous" class='backward'>previous</button>
<button :disabled="!photosAvailable" v-on:click="next" :class="{disabledButton: !photosAvailable}" class='forward'>next</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios#0.12.0/dist/axios.min.js"></script>
<script src='./index.js'></script>
</body>
</html>
In my Vue devtools, I can see that photosAvailable does turn to false, which should change the button to disabled, but it is not.
Hope someone can catch my error, as it is my first time using Vue.
Here's one approach that you can use to make it work including the parts that you should improve on your current code.
Replace app with this under your methods since using app will cause an error since it's undefined. Use this if you want to get access to any state or method under your component.
Since the status of the next and prev buttons are derived from the value of currentNumber of slide, you can define isPrevPhotoAvailable and isNextPhotoAvailable methods under the computed property of your component. With this, you can remove isPhotosAvailable from your state.
Vue.config.devtools = true
var app = new Vue({
el: '#app',
data: {
title: 'Photo of the day!',
description: '',
images: [
{
image: 'https://cdn.spacetelescope.org/archives/images/wallpaper2/heic1509a.jpg', date: '1/9/2019', title: 'Beautiful Milky Way'
},
{
image: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA2MS8wNzUvb3JpZ2luYWwvY2hhbmRyYS1uZ2M2MzU3LWNvbXBvc2l0ZS5qcGc=', date: '1/10/2019', title: 'Amazing Whirlpool Galaxy'
},
{
image: 'https://icdn3.digitaltrends.com/image/space-engine-featured-510x0.jpg?ver=1', date: '1/11/2019', title: 'Wonderous Large Magellanic Cloud'
},
],
currentNumber: 0
},
computed: {
isNextPhotoAvailable: function() {
return this.currentNumber + 1 !== this.images.length;
},
isPrevPhotoAvailable: function() {
return this.currentNumber - 1 !== -1;
}
},
methods: {
next: function() {
this.currentNumber += 1;
},
previous: function() {
return this.currentNumber -= 1;
},
}
})
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anaheim" rel="stylesheet">
<meta charset="UTF-8">
<title>NASA Photo Of The Day</title>
</head>
<body>
<div id='app'>
<section class='hero'>
<h1 class='title'>{{ title }}</h1>
</section>
<section class='picture-area'>
<div class='info'>
<h2>{{ images[currentNumber].title }}</h2>
<p v-bind='description'>{{ description }}</p>
<img class='image-of-day' :src='images[currentNumber].image' />
<p class='date'>{{ images[currentNumber].date }}</p>
<button :disabled="!isPrevPhotoAvailable" v-on:click="previous" class='backward'>previous</button>
<button :disabled="!isNextPhotoAvailable" v-on:click="next" :class="{disabledButton: !isNextPhotoAvailable}" class='forward'>next</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios#0.12.0/dist/axios.min.js"></script>
<script src='./index.js'></script>
</body>
</html>
Maybe try putting the logic in computed?
I'm new to AngularJS, and this project pushes what I already know about using ng-repeat and controllers.
Goal : To make it so when you select an option from the drop down menu and click the button, the guitars will show up with the assistance of ng-repeat. For now, only the names will show up, but I'm focused on ensuring the app.js file works.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<input type="submit" id="searchGuitars" value="Search!">
<section id="bookSection" ng-controller="GuitarCtrl">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</body>
</html>
JS :
var app = angular.module("myApp", []);
app.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
app.controller("GuitarCtrl", function ($scope) {
$('#searchGuitars').click(function() {
if ($('#dropdown').val() == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar"
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if ($('#dropdown').val() == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
})
})
I'm hoping it's not a small error I missed, but the overall layout of this program seems as if it would work, and am unsure as to why not.
Please try to declare JQuery CDN before Angular
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
If you already use the angularjs, do not mix it up with JQuery.
Maybe this solution below could help you.
"use strict";
angular
.module('app')
.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
.controller("GuitarCtrl", function ($scope) {
$scope.searchGuitars = function(guitar) {
if (guitar == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if (guitar == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
console.log($scope.guitars);
}
});
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="style.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-app="app">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown" ng-model="dropdownSelect">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<div ng-controller="GuitarCtrl">
<input type="button" ng-click="searchGuitars(dropdownSelect)" id="searchGuitars" value="Search!">
<section id="bookSection">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</div>
</body>
</html>
So I'm learning directives and controllers in JSAngular. Currently I'm just trying to get the appetizers to loop through on the menu but can't seem to get the output to respond. What am I missing here? Thanks in advance.
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
}
];
$scope.mains = [
{
name: 'Roast Beef Au Jus',
description: 'Delicious Amazing Sauce',
price: 15.99
},
{
name: 'Prime Rib',
description: 'Just like Jacoby/s',
price: 18.95
},
{
name: 'BBQ Ribs',
description: 'Better than Krupa/s',
price: 15.99
}
]
$scope.extras = [
{
name: 'Cole slaw',
},
{
name: 'Creamed Spinach',
},
{
name: 'Boston Baked Beans',
}
]
}]);
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app='PizzaPlanetApp'>
<div class="header">
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div class="appetizers row" ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<h3 class="name"> {{ appetizer.name }} </h3>
<p class="description"> {{ appetizer.description }} </p>
</div>
<div class="price col-md-3">
<p class="price"> {{ appetizers.price | currency }} </p>
</div>
</div>
</div>
</div>
<div class="footer">
<pizza-footer></pizza-footer>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
you need to refer to your PizzaPlanetApp application module first. Add the following line of code before creating the controller.
var app = angular.module("PizzaPlanetApp", []);
This refers to the app you want to create the controller of and contains the list of modules your app depends on.
In your case the list is empty.
jsfiddle