AngularJS table example
This tutorial guides you how to apply angularjs to
<table>, following directive will be used in this sample:
- ng-init
- ng-repeat
- ng-class-odd
<html>
<head>
<title>Angular JS Model</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var app = angular.module('MyForm', []);
app.controller('myCtrl', function($scope) {
});
</script>
<style>
.odd {
background: Green;
color: #FFF;
}
</style>
</head>
<body ng-app="MyForm">
<h3>List students</h3>
<div ng-init=" students = [
{name: 'Kevin', age: 25, gender: 'boy'},
{name: 'John', age: 30, gender: 'girl'},
{name: 'Laura', age: 28, gender: 'girl'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Peter', age: 95, gender: 'boy'},
{name: 'Petter', age: 50, gender: 'boy'},
{name: 'Erika', age: 27, gender: 'girl'},
{name: 'Patrick', age: 40, gender: 'boy'},
{name: 'Samantha', age: 60, gender: 'girl'}
] ">
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th> Name</th>
<th> Age </th>
<th>Gender </th>
</tr></thead>
<tbody><tr ng-repeat="user in students" ng-class-odd="'odd'">
<td>
<button class="btn" >
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr></tbody>
</table>
</div>
</body>
</html>
Hi,
ReplyDeleteThank you for this snippet. You probably want to add some CSS file in addition to AnhularJS library. Otherwise classes are not resolved.
Also, you probably meant "This tutorial *guides*", not "This tutorial guy".
Excellent start! good luck