javascript - 一起使用 jQuery 和 AngularJS?

标签 javascript jquery angularjs html

我是 AngularJS 的新手,这个项目插入了我已经知道的关于使用 ng-repeat 和 Controller 的知识。

目标:为了做到这一点,当您从下拉菜单中选择一个选项并单击按钮时,吉他将在 ng-repeat 的帮助下显示.目前,只会显示名称,但我专注于确保 app.js 文件正常工作。

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"
            }
        ];
    }
}) 
}) 

我希望这不是我遗漏的一个小错误,但该程序的总体布局似乎可行,但我不确定为什么不行。

最佳答案

请尝试在 Angular 之前声明 JQuery CDN https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

关于javascript - 一起使用 jQuery 和 AngularJS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39865338/

相关文章:

arrays - angularjs 比较两个数组

javascript - AngularJS 单击添加/删除复选框和图片

Javascript 访问嵌套元素

php - 通过 jQuery 过滤图像集合

javascript - :的扫描码是什么

javascript - 这个 javascript 没有从数据库动态获取数据有什么问题?

jquery - 如何更改jquery菜单从右侧打开?

angularjs - 如何在范围内找到 watch 。$$watchers

javascript - 从不同的对象分配 ng-model 输入值

javascript - 删除和重建文件输入时清除文件列表