ngTable - Readonly Table

To demonstrate ngTable capabilities I will be using an example of the Employee portal in all my posts. This Employee portal has capabilities of adding, viewing, editing and deleting employee skill data. 

Employee Skill View screen looks as below:

We have the employee data models in following manner:

    public class Employee
    {
        public Employee()
        {
        }
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName {get; set;}
        public IList<Skill> Skills { get; set; }                
    } 

  public class Skill
    {
        public Skill()
        {
        }
        public int ID { get; set; }
        public string Bame{ get; set; }
        public SkillType Type{get; set;}
        public int Rating { get; set; }   
        public int IsPrimary{ get; set; }              
    } 


  public class SkillType
    {
        public SkillType()
        {
        }
        public int ID { get; set; }
        public string Name{ get; set; } 

    } 

Lets assume that the services to get the employee data is already available, now lets build a view to display the employee details in angularJS application. Below are the steps you need to follow:

• Add ngTable module to where the app module is being declared.

                 var myApp = angular.module("myApp", ["ngTable"])

• In the HTML file (partial view) add the following code where you want your employee skill table to appear. We have used Span in place of text-boxes and drop-down boxes and disabled the checkbox as this is just the view screen of employee skills. 

            <div>

               <table ng-table="employeeSkills">

                  <tr ng-repeat="skill in $data">

                    <td data-title="'#'">{{$index + 1}}</td>

                    <td data-title="'Skill Type'" >

                         <span>{{skill.type.name }}</span>

                     </td>

                     <td data-title="'Skill Name'" >

                           <span>{{skill.name }}</span>

                     </td>

                     <td data-title="'Rating '" >

                         <span>{{skill.rating }}</span>

                     </td>

                    <td data-title="'Is Primary'" >

                   <input type="checkbox" ng-model="skill.isPrimary" value="{{skill.isPrimary}}" disabled />

                   </td>

                </tr>

             </table>

          </div

• In the controller javascript file add the below code: (The employeeSkills are being hard coded here but in actual scenario a service call need to be made to get the details from database, I will be uploading the full source code at the end of the series so till then please bear with the hard coded values) .The object count of the object ngTableParams is set to empty array to make sure that pagination is disabled. The object dataset of the object ngTableParams is set with the employee skill data. 

          myApp.controller('viewEmployeeSkillController', ['ngTableParams', '$scope', 
                 function (ngTableParams, $scope) {

                 var skills = [

                            {name: "Java", type: {id: 1, name: 'Technical'}, rating: 2, IsPrimary: 'false'},

                            {name: "Life Science", type: {id: 2, name: 'Technical'}, rating: 4, IsPrimary: 'false'},

                            {name: "Communication", type: {id: 3, name: 'Technical'}, rating: 5, IsPrimary: 'false'}

                            ] ;     

                $scope.employeeSkills= new ngTableParams({}, {

                  dataset: skills,

                  counts: []

              });

          }]);