<!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body ng-controller="myController"> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <table class="table table-bordered"> <thead class="alert-info"> <tr> </tr> </thead> <tbody style="background-color:#fff;"> <tr ng-repeat="user in users"> </tr> </tbody> </table> </div> </body> </html>
var app = angular.module("myModule", []) .controller("myController", function($scope){ var users = [ {firstname: "Angelo", lastname: "Borg", age: "35", username: "borg123", password: "12345"}, {firstname: "Jane", lastname: "watson", age: "16", username: "watson", password: "jane123"}, {firstname: "Karl", lastname: "Heron", age: "21", username: "heron", password: "12345678"}, ]; $scope.users = users; $scope.content = undefined; $scope.contentToggle = function(name){ if ($scope.isContentToggled(name)){ $scope.content = undefined; } else { $scope.content = name; } } $scope.isContentToggled = function (name){ return $scope.content == name; } });