來自json，onclick的Angularjs數據顯示相應的數據到右邊

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> 

而且在co ntroller：

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

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