Angular: Empty Fiddle
http://angularjs.org/
by Sajeetharan Sinnathurai
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="http://samu.github.io/angular-table/js/angular-table.min.js"></script>
<div ng-controller="filteredTableCtrl">
<div id="canvas">
<div class="table-body">
<div class="layout-row" layout="row">
<div class="widget0m-mapped-data2">
<md-content>
<div layout="row" class="margin-top-20" layout-align="center center">
<md-input-container class="md-icon-float md-block width80percent">
<label>Search</label>
<input type="text" ng-model="search" ng-change="updateFilteredList(search)">
</md-input-container>
</div>
<div class="table-area" layout-margin>
<table class="table table-striped" at-table at-list="tableData" at-config="config" at-paginated>
<thead>
<tr><th at-attribute={{field}} ng-repeat="field in fieldData">{{field}}</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in tableData">
<td at-implicit at-sortable at-attribute="id" at-initial-sorting="asc"></td>
<td at-implicit at-sortable at-attribute={{field}} ng-repeat="field in fieldData" ></td>
</tr>
</tbody>
</table>
</div>
<div layout="row" layout-align="center center">
...
JavaScript
var myApp = angular.module('myApp',["angular-table"]);
myApp.controller("filteredTableCtrl", ["$scope", "$filter", "$http", function($scope, $filter, $http)
{
$scope.list = [];
$scope.dummyVar = 'Timer started!';
var timer = setInterval(function(){
$scope.dummyVar = 'Timer finished!';
$scope.list = [
{
index: 1,
name: "Kristin Hill",
email: "[email protected]"
},
{
index: 2,
name: "Valerie Francis",
email: "[email protected]"
},
{
index: 3,
name: "Bob Abbott",
email: "[email protected]"
}
];
$scope.$apply();
}, 1000);
}]);