json的Angularjs数据，onclick，在右边显示相应的数据

Question

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

[
  {
    "title" : "Sake / Shochu - TBD",
    "Body" : "Sake / Shochu - TBDn",
    "Category" : "Beverage",
    "Nid" : "19"
  },
  {
    "title" : "Bottle Beer ",
    "Body" : "Bottle Beer - TBDn",
    "Category" : "Beverage",
    "Nid" : "18"
  },
  {
    "title" : "Wine",
    "Body" : "House red wine - Rotating varietalnHouse white wine - Rotating varietaln",
    "Category" : "Beverage",
    "Nid" : "17"
  },
  {
    "title" : "On Tap",
    "Body" : "Kona – Golden LagernKirin Ichiban – Pale LagernHitachino – White AlenSapporo Premium DraftnAsahi Super DrynThree Weaversn",
    "Category" : "Beverage",
    "Nid" : "16"
  },
  {
    "title" : "San Pellegrino",
    "Body" : "San Pellegrinon",
    "Category" : "Beverage",
    "Nid" : "15"
  },
  {
    "title" : "Tea",
    "Body" : "Tea - House-brewed Jasmine Iced Tean",
    "Category" : "Beverage",
    "Nid" : "14"
  },
  {
    "title" : "Soda",
    "Body" : "Soda - Coke, Diet Coke, Sprite, Dr. Pepper, Root Beer, Lemonaden",
    "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 vinaigretten nTempeh with Kare – Vegetarian Goodness!                                                                                                                                                nOrganic Tempeh, Shoyu marinade, carrots, yuzu-jalapeno slaw, citrus yuzu-vinaigrette, fried egg, slow-cooked Japanese curryn 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 eggn* Substitute Angus patty with chicken pattyn nChicken Katsu with Karē: Classic Comfort                                                                                                                                   nPanko-crusted fried chicken, slow-cooked japanese curryn* Add fried eggn",
    "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>

在控制器中：

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

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