4
저는 AngularJS를 처음 사용했습니다.이 프로젝트는 ng-repeat와 컨트롤러를 사용하여 이미 알고있는 것을 푸시합니다.jQuery와 AngularJS를 함께 사용 하시겠습니까?
목표 : 드롭 다운 메뉴에서 옵션을 선택하고 버튼을 클릭하면 기타가 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"
}
];
}
})
})
나는 내가 놓친 작은 오류가 아니다 바라고 있지만,이 프로그램의 전체 레이아웃 보인다는 것처럼 왜 일하지 않는지 확실하지 않습니다.
이동'겨 컨트롤러 = "GuitarCtrl"'다음'에 NG-응용 프로그램 = "을 myApp"'. –
흠, 시도했을 때 작동하지 않았습니다. GuitarCtrl의 결과가 특정 섹션에서 반복되는 것에 대해서만 걱정할 것이기 때문에 그대로 둘 수 있습니다. 그렇지 않습니까? –
귀하의 정보 .. 언젠가는'ng-options'에 대해 읽어 보시고'jquery'와'AngularJS'를 함께 사용하는 것에 대한 권장 사항은 도움이 될 것입니다 .. http://stackoverflow.com/questions/14994391/thinking- jquery-background-if-i-have-a-jquery-background –