AngulatJS External Template or display the list using ng-repeat and show hide data by clicking on list items or sho hide based on list items or show the content when we click on list items:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="templateMethod.html">
<table>
<tr>
<td>
<div ng-show="state.toShow == '{{method.name}}Field'">
<h3>{{mmethodethod.name}}</h3>
<p>
<strong>Description</strong>
{{method.description}}
</p>
<p>
<strong>Benefits</strong>
{{method.benefits}}
</p>
<p>
<strong>Best practices</strong>
{{method.bestPractices}}
</p>
<p>
<strong>Examples</strong>
{{method.example}}
</p>
</div>
</td>
<td class = "sidebar">
<ul>
<li><a ng-click="state.toShow = '{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>
</ul>
</td>
</tr>
</table>
</script>
</head>
<body ng-controller="MainCtrl">
<div ng-model="methods"
ng-include="'templateMethod.html'"
ng-repeat = "method in methods">
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.state = { toShow: false };
$scope.methods = [{
name: 'method1',
description: 'bla bla bla',
benefits: 'benefits of method1',
bestPractices: 'bestPractices',
example: 'example'
},
{
name: 'method2',
description: 'bla bla bla',
benefits: 'benefits of method2',
bestPractices: 'bestPractices',
example: 'example'
}
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="templateMethod.html">
<table>
<tr>
<td>
<div ng-show="state.toShow == '{{method.name}}Field'">
<h3>{{mmethodethod.name}}</h3>
<p>
<strong>Description</strong>
{{method.description}}
</p>
<p>
<strong>Benefits</strong>
{{method.benefits}}
</p>
<p>
<strong>Best practices</strong>
{{method.bestPractices}}
</p>
<p>
<strong>Examples</strong>
{{method.example}}
</p>
</div>
</td>
<td class = "sidebar">
<ul>
<li><a ng-click="state.toShow = '{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>
</ul>
</td>
</tr>
</table>
</script>
</head>
<body ng-controller="MainCtrl">
<div ng-model="methods"
ng-include="'templateMethod.html'"
ng-repeat = "method in methods">
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.state = { toShow: false };
$scope.methods = [{
name: 'method1',
description: 'bla bla bla',
benefits: 'benefits of method1',
bestPractices: 'bestPractices',
example: 'example'
},
{
name: 'method2',
description: 'bla bla bla',
benefits: 'benefits of method2',
bestPractices: 'bestPractices',
example: 'example'
}
];
});
</script>
</body>
</html>
No comments:
Post a Comment