Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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.

share|improve this question
    
Move ng-controller="GuitarCtrl" next to ng-app="myApp". – Ravi Teja Oct 5 '16 at 4:18
    
Hmm, that didn't work when I tried. I could leave it where it is because I'm only worried about having GuitarCtrl's results repeat in that certain section though, couldn't I? – Alex Marvick Oct 5 '16 at 4:23
1  
For your info.. take sometime to read about ng-options and recommendations about using jquery and AngularJS together...this may help.. stackoverflow.com/questions/14994391/… – Ravi Teja Oct 5 '16 at 4:32
up vote 0 down vote accepted

JQuery is unnecessary in this scenario and using it is a really bad way to get started with AngularJS. If you are going to use a framework then it is best to commit to using it properly. An hour or 2 studying a getting started guide will save you a lot of pain later.

share|improve this answer
    
That's understandable. I took a mini online class that showed me how to do exactly this, but with just one scope, so I assumed if I wanted to do this project that it would work. But I think it would be of interest to look at this -- thanks for the disclaimer there. – Alex Marvick Oct 5 '16 at 22:33
up vote 0 down vote

Please try to declare JQuery CDN before Angular https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

share|improve this answer
    
If I'm correct in my limited Angular understanding, the Angular CDN should be one of the last things loaded (just for performance so page load is not slowed trying to bring in a heavy framework). – tfantina Oct 5 '16 at 4:54
up vote 0 down vote

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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.