AngularJs - ng-click

by Marventus

HTML

<div ng-app="myRows">
  <table ng-controller="MainCtrl as ctrl" cellspacing="0">
    <thead>
      <tr>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in ctrl.people">
        <td ng-click="ctrl.alertRole(person.role)">{{person.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body {
  font: 16px Arial, Helvetica, sans-serif;
}

table {
  background: #fff;
  border: 1px solid #aaa;
  margin: 1em auto;
  text-align: center;
  width: 50%;
}

table td {
  cursor: pointer;
  cellpadding: 0;
  padding: 0;
}

table thead tr {
  background: #66f;
  color: #fff;
  border-bottom: 1px solid #aaa;
  font-weight: bold;
  height: 1.5em;
  padding: 2em;
}

table tbody {
  font-size: 0.9em;
}

table tbody td {
  border-top: 1px solid #eef;
}

JavaScript

var myRows = angular.module("myRows", []);
myRows.controller("MainCtrl", function() {
  this.people = [{
    name: "Raúl",
    role: "Student"
  }, {
    name: "José",
    role: "Teacher"
  }, {
    name: "Daniela",
    role: "Teacher"
  }, {
    name: "Constanza",
    role: "Student"
  }];
  this.alertRole = function(role) {
    alert(role);
  };
});