Question

我正在研究我的角鸡尾酒应用程序，我设法得到我在我的数据库中显示所有鸡尾酒的部分（仅显示名称），但现在我想如果我点击某个鸡尾酒来显示完整内容在一个特定的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'chent'。 Aka显示：所选鸡尾酒的{{“”+ drink.Name +“”drink.Ingredients +“”}}。

Answer 1

您应该使用ng-click而不是使用jQuery函数，并使用新的范围变量来设置当前饮品的所有数据，并根据您应该具有的数据：

在控制器中添加一个空范围和一个设置为空范围的函数。

$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

单击时在div中显示特定查询

1 个答案: