i want to make dynamic code strong text
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].Name;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="[email protected]" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList(0)">cat1</a>
</li>
<li class="list-group-item" ng-click="updateList(1)"><a ng-click="updateList(1)">cat2</a>
</li>
<li class="list-group-item" ng-click="updateList(2)"><a ng-click="updateList(2)">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in adults">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>guys, i am facing some issue in angular js. I want to display categories list on the left side and display product name on right side panel when you click on cat1 display all include categories product name.as an example when you click cat1 that time display name as "pro1" and "pro3" for reference check image is it possible in angular.ja 1.6.x? enter image description here
var shop = {
categories: [
'cat1','cat2','cat3'
],
products: [
{
name: 'pro1',
categories: ['cat1']
},
{
name: 'pro2',
categories: ['cat2']
},
{
name: 'pro3',
categories: ['cat1','cat3']
}
]
};
Check the code below :