javascript - Angularjs data from json, onclick , 右边显示相应的数据

Question

我是 angularjs 的新手，我一直在努力解决这个问题。请检查下面的代码以了解我的意思。标题列在左侧，单击标题链接时，我希望相应的正文显示在右侧。一个很好的例子可以在这里找到，http://twotenjack.com/nashville/ , 查看菜单部分。感谢任何帮助

[
  {
    "title" : "Sake / Shochu - TBD",
    "Body" : "Sake / Shochu - TBD\n",
    "Category" : "Beverage",
    "Nid" : "19"
  },
  {
    "title" : "Bottle Beer ",
    "Body" : "Bottle Beer - TBD\n",
    "Category" : "Beverage",
    "Nid" : "18"
  },
  {
    "title" : "Wine",
    "Body" : "House red wine - Rotating varietal\nHouse white wine - Rotating varietal\n",
    "Category" : "Beverage",
    "Nid" : "17"
  },
  {
    "title" : "On Tap",
    "Body" : "Kona – Golden Lager\nKirin Ichiban – Pale Lager\nHitachino – White Ale\nSapporo Premium Draft\nAsahi Super Dry\nThree Weavers\n",
    "Category" : "Beverage",
    "Nid" : "16"
  },
  {
    "title" : "San Pellegrino",
    "Body" : "San Pellegrino\n",
    "Category" : "Beverage",
    "Nid" : "15"
  },
  {
    "title" : "Tea",
    "Body" : "Tea - House-brewed Jasmine Iced Tea\n",
    "Category" : "Beverage",
    "Nid" : "14"
  },
  {
    "title" : "Soda",
    "Body" : "Soda - Coke, Diet Coke, Sprite, Dr. Pepper, Root Beer, Lemonade\n",
    "Category" : "Beverage",
    "Nid" : "13"
  },
  {
    "title" : "Salads",
    "Body" : "Maaketo – Classic Market Salad.                                                                                                                                                      \nChopped romaine, carrots, avocado, smoked bacon bits, grilled chicken, almonds, mandarin, fresh wonton crisp, creamy yuzu vinaigrette\n \nTempeh with Kare – Vegetarian Goodness!                                                                                                                                                \nOrganic Tempeh, Shoyu marinade, carrots, yuzu-jalapeno slaw, citrus yuzu-vinaigrette, fried egg, slow-cooked Japanese curry\n \n",
    "Category" : "Food",
    "Nid" : "12"
  },
  {
    "title" : "Rice and Poultry ",
    "Body" : "Karē Loco Moco: Have a Feast and Take a Nap!                                                                                                                             \nDouble Angus patty, slow-cooked Japanese curry, fried egg\n* Substitute Angus patty with chicken patty\n \nChicken Katsu with Karē: Classic Comfort                                                                                                                                   \nPanko-crusted fried chicken, slow-cooked japanese curry\n* Add fried egg\n",
    "Category" : "Food",
    "Nid" : "11"
  }
]

这是我的 JS:

var app = angular.module('myApp', []);
app.controller('menuCtrl', function($scope, $http) {
    $http.get("menu-json").success(function(response) {
        $scope.titles = response;
        var nid ="19";
        $scope.isFood = function(titles) {
           return titles.Category === "Food";
        };
        $scope.isBeverage = function(titles) {
           return titles.Category === "Beverage";
        };
    });
});

这是我的 HTML:

<div id="menu" class="wrapper clearfix" ng-app="myApp" ng-controller="menuCtrl">

    <h2 class="block-title">Menu</h2>
    <div class="col-md-4">
        <h3 class="food">Food</h3>
        <ul class="ul-food">
           <li class="node{{ x.Nid }}" ng-repeat="x in titles | filter:isFood">
             <a href""> {{ x.title }}</a>
           </li>
        </ul>

        <h3 class="food">Beverage</h3>
        <ul class="ul-bev">
           <li ng-repeat="x in titles | filter:isBeverage">
              <a href""> {{ x.title }}</a>
           </li>
        </ul>
    </div>
    <div class="col-md-8">
        <div class="body">
            The corresponding body from json should appear here when you click on a title
        </div>

    </div>
</div><!-- end wrapper-->

Answer 1

我会使用辅助函数做这样的事情:

<div class="col-md-4">
    <h3 class="food">Food</h3>
    <ul class="ul-food">
        <li class="node{{ x.Nid }}" ng-repeat="x in titles | filter:isFood">
            <a href="" ng-click="select(x)"> {{ x.title }}</a>
        </li>
    </ul>
    <h3 class="food">Beverage</h3>
    <ul class="ul-bev">
        <li ng-repeat="x in titles | filter:isBeverage">
            <a href="" ng-click="select(x)"> {{ x.title }}</a>
        </li>
    </ul>
</div>
<div class="col-md-8">
    <div class="body">
        <h2>{{selectedItem.title}}</h2>
        <p>{{selectedItem.Body}}</p>
    </div>
</div>

在 Controller 中:

$scope.select = function(item) {
    $scope.selectedItem = item;
};

演示: http://plnkr.co/edit/Zb3CxG0fKTpxfi3yA2Fv?p=info