Javascript 一起使用jQuery和AngularJS？_Javascript_Jquery_Angularjs_Html

Javascript 一起使用jQuery和AngularJS？

javascript jquery angularjs html

Javascript 一起使用jQuery和AngularJS？,javascript,jquery,angularjs,html,Javascript,Jquery,Angularjs,Html,我是AngularJS的新手，这个项目推广了我已经知道的关于使用ng repeat和Controller的知识目标：要做到这一点，当您从下拉菜单中选择一个选项并单击按钮时，吉他将在ng repeat的帮助下显示。目前，只显示名称，但我的重点是确保app.js文件正常工作 HTML: <!DOCTYPE html> <html> <head> <title>Angular Project 2</title> <

我是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>

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

我希望这不是我错过的一个小错误，但是这个程序的总体布局似乎可以工作，我不确定为什么不能。

请在开始之前尝试声明JQuery CDN

JQuery在这种情况下是不必要的，使用它是开始使用AngularJS的一种非常糟糕的方法。如果您打算使用一个框架，那么最好承诺正确地使用它。一个小时或两个小时学习a将为您以后节省大量的痛苦。

如果您已经使用了angularjs，请不要将其与JQuery混淆

也许下面的解决方案可以帮助您

“严格使用”；
有棱角的
.module（'应用程序'）
.controller（“HeaderCtrl”，功能（$scope）{
$scope.appDetails={
标题：“JamLog”，
标语：“看看我们库存的精美乐器！”
};
})
.控制器（“GuitarCtrl”，功能（$scope）{
$scope.searchGuitars=函数（吉他）{
如果（吉他=“雅马哈”）{
$scope.guitars=[
{
标题：“雅马哈Revstar 420”，
乐器：“电吉他”，
颜色：“红色”，
价格：$499.99，
详情：“是”，
imageURL:“YamahaRS420.jpg”
},
{
标题：“雅马哈Pacifica系列PAC012”，
乐器：“电吉他”，
颜色：“蓝色”，
价格：“$”，
详情：“是”，
imageURL:“yamahapacificaseespac012.jpg”
}
];
}
else if（吉他=“吉布森”）{
$scope.guitars=[
{
标题：“Gibson Les Paul海关”，
乐器：“电吉他”，
颜色：“蓝色”，
价格：“$”，
详情：“是”，
imageURL:“GibsonLesCustomBlue.jpg”
},
{
标题：“雷鸟”，
乐器：“低音”，
颜色：“黑色”，
价格：“$”，
细节：“由SOAD贝斯手使用”，
imageURL:“GibsonThunderbirdIV.jpg”
}
];
} 
log（$scope.guitars）；
}    
});

角度项目2
{{appDetails.title}
{{appDetails.tagline}
雅马哈
吉布森
杰克逊
ESP


{{吉他.标题}
Moveng controller=“GuitarCtrl”
移动到ng app=“myApp”
旁边。嗯，我尝试时没有用。我可以把它放在原处，因为我只担心GuitarCtrl的结果会在那个特定的部分重复，不是吗？请参考。。花点时间阅读关于ng选项
以及关于同时使用jquery
和AngularJS
的建议……这可能会有所帮助。。如果我有限的角度理解是正确的，那么角度CDN应该是最后加载的内容之一（只是为了性能，这样页面加载不会因为引入沉重的框架而减慢）。这是可以理解的。我参加了一个小型的在线课程，向我展示了如何做到这一点，但只有一个范围，所以我假设如果我想做这个项目，它会工作。但我想看看这个会很有意思——谢谢你的免责声明。