As a beginner in angularJS, I am facing challenges in creating dynamic output for my simple app.
Below is the HTML code snippet -
<div ng-app="MyApp">
<div ng-controller="TabsDemoCtrl">
<div ng-controller="TabsDemoCtrl">
<h1> Struggling to display dynamic data like this?</h1>
<table ng-repeat="customize in data">
<tr>
<th colspan="2">{{customize.product.name}}</th>
</tr>
<tr>
<td colspan="2">Assets</td>
</tr>
<tr>
<td>{{ How do I bind dynamic attribute data here? }}</td>
<td>{{ How to bind dynamic subattribute data here? }}</td>
</tr>
</table>
</div>
</div>
</div>
And here's the JS code -
angular.module('MyApp', [
'ui.bootstrap']);
(function(MyApp) {
'use strict';
MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) {
// categories
$scope.data = [
{
product : {
name : 'Product 1'
},
assets : {
color : {
black : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png'
}
}
},
{
product : {
name : 'Product 2'
},
assets : {
soles : {
black : '/file/840ec1ff-6d27-40af-b4ca-277aa09ad147.png',
red : '/file/1970f2e2-b7a0-439c-98d9-b9ea1604c227.png'
},
material : {
black : '/file/aebe8f68-60fd-4fda-bd46-00e80f190ba2.png',
green : '/file/e225e20d-5b97-4a60-8337-0551064a8d8c.png'
},
lining : {
blue : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png',
red : '/file/280fecb5-ebe5-47cb-85f4-4d1bf6dd8ed0.png'
}
}
}
];
}]);
})(angular.module('MyApp'));
I attempted to create an output of dynamic structured data in this demonstration link, but unfortunately it didn't work.
Can anyone guide me on how to display this dynamic data in the view?