I'm brand new to using AngularJS and I've been struggling with this issue. Take a look at the code snippet below to see what I mean. The titles are shown on the left, and when you click on one, I want the corresponding body to display on the right side of the screen. An example similar to what I'm looking for can be found here: in the menus section. Any assistance would be greatly appreciated.
[
{
"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"
},
...
]
Here is my 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";
};
});
});
Here is my 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 relevant content from the JSON should appear here once a title is clicked.
</div>
</div>
</div><!-- end wrapper-->