Using jQuery and AngularJS together?

Question

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.

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 05 '16 at 04:23
For your info.. take sometime to read about `ng-options` and recommendations about using `jquery` and `AngularJS` together...this may help.. http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Ravi Teja, Oct 05 '16 at 04:32

score 0 · Answer 1 · answered Oct 05 '16 at 04:27

0

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

answered Oct 05 '16 at 04:27

Le Phuc Tai

1
3

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 05 '16 at 04:54

score 0 · Answer 2 · answered Oct 05 '16 at 05:30

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>

Using jQuery and AngularJS together?

2 Answers2