JSFiddle - React, Tailwind, and code Playground

by Son Che Dinh

HTML

<body>
<h2>Su dung bang trong Anguar Js</h2>
<div ng-app="ungdungAngularjs" ng-controller="employeeController">
<table border="0">
<tr><td>Last name:</td><td><input type="text" ng-model="employee.last_name"></td></tr>
<tr><td>First name: </td><td><input type="text" ng-model="employee.first_name"></td></tr>
<tr><td>Full name: </td><td>{{employee.full_name()}}</td></tr>
<tr><td>Rank details:</td><td>
<table>
   <tr>
      <th>Criteria</th>
      <th>Rank</th>
   </tr>
   <tr ng-repeat="record in employee.rank_list">
      <td>{{ record.criteria }}</td>
      <td>{{ record.rank }}</td>
   </tr>
</table>
</td></tr>
</table>
</div>
</body>

CSS

table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}

JavaScript

var ungdungAngularjs = angular.module("ungdungAngularjs", []);

ungdungAngularjs.controller('employeeController', function($scope) {
   $scope.employee = {
      first_name: "Nguyen Thanh",
      last_name: "Linh",
      rank_list:[
         {criteria:'Knowledge',rank:7.0},
         {criteria:'Quality',rank:8.5},
         {criteria:'Autonomy',rank:7.5},
		     {criteria:'Complexity',rank:9.5},
		     {criteria:'Preception of context',rank:9.0},
         {criteria:'Hou-ren-sou',rank:9.5},
         {criteria:'Teamwork',rank:9.5},
         {criteria:'Management',rank:9.5},
         {criteria:'Coding',rank:9.5},
         {criteria:'QA',rank:9.5}
      ],
      full_name: function() {
         var employee;
         employee = $scope.employee;
         return employee.last_name + " " + employee.first_name;
      }
   };
});