點擊在div上顯示特定查詢

-1

我正在使用我的角度雞尾酒應用程序，並設法進入顯示我的數據庫中所有雞尾酒（僅顯示名稱）的部分，但現在我想如果我點擊某個雞尾酒以在特定的div中顯示完整內容。點擊在div上顯示特定查詢

我可以用ng-click做點嗎？

我目前的HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Bar Master</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!--ANGULAR--> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script src="js/controller.js"></script> 

    <!--CSS--> 
    <link rel="stylesheet" type="text/css" href="style.css"></link> 

    <!--Yanone font--> 
    <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet"> 

    <!--Font Awesome--> 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 

</head> 
<body ng-app="mainApp"> 

    <div ng-controller="cocktail"> 
     <div class="container cocktail_list"> 
      <div class="col-sm-12"> 
      <center><h2>COCKTAILS THAT WE SERVE</h2></center> 
      </div> 
      <div class="col-sm-8"> 
       <ul> 
        <div class="col-sm-3" ng-repeat="drink in cocktails | filter:globalSearch"> 
        <li> 
         </i><button class="cocktail_button">{{" " + drink.Name + " "}}</button> 
        </li> 
        </div> 
       </ul> 
      </div> 
      <div id="recipe" class="col-sm-4 cocktail_image"> 
       COCKTAIL NAME AND INGREDIENTS.... 
      </div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="col-sm-12"> 
      <center> 
      <div id="seachBoxes"> 
       <h2>Search for a cocktail by its name or ingredient</h2> 
       <input type="text" ng-model="globalSearch.$" class="global_search"> 
      </div> 
      </center> 
     </div> 
    </div> 

</body> 
</html>

controller.js：

var fileX={ 
    "records": [ 
     { 
      "Name":"Martini", 
      "Price":"7", 
      "Ingredients":"Lemon peel vodka gin" 
     }, 
     { 
      "Name":"Autumn Leaves", 
      "Price":"9", 
      "Ingredients":"gin vermouth lemon peel" 
     }, 

     { 
      "Name":"7 Naranja", 
      "Price":"7", 
      "Ingredients":"Havana Club Añejo ice cube Apricot Brandy Angostur" 
     }, 
     { 
      "Name":"A Day At The Beach", 
      "Price":"6", 
      "Ingredients":"malibu rum amaretto orange juice grenadine" 
     }, 
     { 
      "Name":"Appletini", 
      "Price":"7", 
      "Ingredients":"De Kuyper Sour Apple Absolut vodka" 
     }, 
     { 
      "Name":"B-52", 
      "Price":"7", 
      "Ingredients":"Kahlue (coffee liqour) Irish cream liqueur (Baileys) Premium Orange Liqueur" 
     }, 
     { 
      "Name":"Black Sunset", 
      "Price":"8", 
      "Ingredients":"Malibu Black orange juice Cranberry juice " 
     }, 
     { 
      "Name":"Blue Lagoon", 
      "Price":"5", 
      "Ingredients":"ananas juice Havana Club 3 Años rum DeKuyper Blue Curaçaa" 
     }, 
     { 
      "Name":"Hollywood", 
      "Price":"7", 
      "Ingredients":"Absolut vodke DeKuyper Raspberry ananas juice" 
     }, 
     { 
      "Name":"Red Splash", 
      "Price":"8", 
      "Ingredients":"tequilla red wine Graffigna Centenario Malbec agave juice lemon or lime juice grapefruit soda" 
     }, 
     { 
      "Name":"Rum Cola", 
      "Price":"7", 
      "Ingredients":"Havana Club 3 Años rum Coca-Cola lemon lime slice" 
     }, 
     { 
      "Name":"The Godfather", 
      "Price":"7", 
      "Ingredients":"whiskey amaretto" 
     }, 



    ] 
} 

var app = angular.module('mainApp', []); 

app.controller('cocktail', function($scope){ 
    $scope.cocktails = fileX.records; 

});

所以我想請單擊代表一個特定的雞尾酒按鈕和顯示DIV與coctail的全部內容id'recipe'。又名顯示：所選雞尾酒的{{「」+ drink.Name +「」drink.Ingredients +「」}}}。

來源

2016-12-02 mheonyae

而不是使用jQuery的功能，您應該使用ng-click，並有一個新的作用域變量，其中設置了當前飲料的所有數據到，並基於你應該有：

在控制器添加一個空的範圍和一個函數來設置爲空的範圍。

$scope.currentDrink = null; 
$scope.setCurrentDrink = function(drink){ 
    $scope.currentDrink = drink; 
}

然後用這個：

<ul> 
    <li ng-repeat="drink in cocktails | filter:globalSearch" ng-click="setCurrentDrink(drink);"> 
    <button class="cocktail_button">{{" " + drink.Name + " "}}</button> 
    </li> 
</ul>

和編輯#recipe：

<div ng-if="currentDrink != null" id="recipe" class="col-sm-4 cocktail_image"> 
      Dump the params for currentDrink.... 
      {{currentDrink}} 
</div>

對不起，如果這是一個有點難看，寫我的手機上。

我也設法創建一個plunker

來源

2016-12-02 19:07:20

2分鐘打敗我。這是[我的版本的同一個想法]（http://jsfiddle.net/g642su0v/）。 –

非常感謝，剛剛還有1個問題，我如何獲得更好/更清晰的數據顯示？代替{「姓名」：「秋葉」，「價格」：「9」，「配料」：「杜松子酒檸檬皮」}，類似於Autumb葉片杜松子酒檸檬皮？ – mheonyae

啊，我在@Alex K解決方案中看到了，謝謝你們兩位！ – mheonyae

-1

只需使用jQuery功能click()即可。

這是一個普遍的功能，將所有的雞尾酒工作：

<button class="cocktail_button">{{" " + drink.Name + " "}}</button> 

<script> 
    $('.cocktail_button').click(function() { 
     var cocktailName = $(this).html() 

     /* grab the relevant cocktail information based on the cocktail name */ 

     /* format it how you want it and add it to your recipe div */ 
     $('#recipe').html(...) 
    }) 

    /* the js above would go in your controller.js */ 
</script>

來源

2016-12-02 18:40:22 Nic

什麼是反對票？ – Nic

@mheonyae正在使用angular，爲什麼他應該反覆使用jQuery而不是AngularJS的強大功能？ –

當你的工具箱中唯一的東西是錘子時，一切看起來都像釘子。 – mhodges

點擊在div上顯示特定查詢

回答

相關問題