AngularJS Example

by Viktor Evdokimov

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<form id='myForm'>
    <div ng-app="myApp">
        <div ng-controller="tableCtrl">
            <div ng-form='ctrlForm'>
                <table >
                    <thead>
                        <tr>
                            <td rowspan="2"> name </td>
                            <td ng-repeat='g in groups' colspan='4'>{{ g.name }}</td>
                            <td rowspan="2">action</td>
                        </tr>
                        <tr>              
                            <td ng-repeat='g in allCells(groups)'>{{ shiftMap[$index%shiftMap.length] }}</td>
                            
                        </tr>
                    </thead>
                    <tbody ng-show='!isEditing' ng-hide='isEditing'>
                        <tr ng-repeat='e in events' ng-class-odd='"odd"' >
                            <td><span>{{ e.name }}</span><br />
                                <small>{{ e.type }}</small><br />
                                <small>{{ e.organ }}</small><br />
                            </td>        
                            <td editor='e' fields='fields' groups='groups' editbutton="true"></td>             
                        </tr>
                    </tbody>
                    <tbody ng-show='isEditing' ng-hide='!isEditing'>
                        <tr>
                            <td><span>{{ activeRow.name }}</span><br />
                                <small>{{ activeRow.type }}</small><br />
                                <small>{{ activeRow.organ }}</small><br />
                            </td>        
                            <td editor='activeRow' fields='fields' groups='groups' ></td>
                            <!-- <td><a ng-click="saveRow()">save</a></td> -->
                        </tr>              
           ...

CSS

textarea { 
 height: 26px;
 line-height: 16px;
}

table {
 width:100%;    
 border-collapse : collapse;

}

td, th {  padding:1px;}
td:first-child { width:100px; } 
td[colspan] { text-align:center; }

input { width:100%;padding:0 0 0 5px;margin:0;
    border:1px solid #fff;
    font-size:20px;height:100%;
}

tr.odd { background: #f0f0f0; }
tr.odd input { border:1px solid #f0f0f0; background:#f0f0f0; }
input:focus { outline:none; background:#ffffee !important; border:1px solid #ffffee; }

.ng-invalid { background:#ffcccc !important; }

JavaScript

function tableCtrl($scope) {
    var shiftMap = $scope.shiftMap = ['events','subjects','affected', '% at risk']
    var fields  = $scope.fields = [
         { name: 'events', required: true }
        ,{ name: 'subjects' }
        ,{ name: 'affected', max: 'subjects' }]
    $scope.isEditing = false
    
    $scope.activeRow = null
        
    $scope.groups = [ {name : '100 mg'}
                     ,{name : '150 mg'}
                     ,{name : 'placebo'}]
    
    window.events = $scope.events = [{ name : 'e', type :'some', organ :'blood'
                      , items : [{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 } ] }
                     , { name:'f', type : 'any', organ :'heart'
                        , items :[{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 } ]}
                     , { name: 'g', type: 'all', organ :'skin'
                        , items : [{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 }
                                 ,{ events : 1, subjects: 2, affected : 3 } ]}]
    
    $scope.array  = function ( n ) {
         return new Array(n)   
    }
    
    $scope.allCells = function ( a ) {
         return $scope.array( $scope.shiftMap.length * a.length )      
    }
    
    $scope.edit = function (e) {
        
         $scope.activeRow = e
         
         $scope.isEditing = true      
         
    }       
    
    $scope.saveRow = function (e) {
        
         $scope.isEditing = false
         
         $scope.activeRow = null        
    }
}

angular.module('components', ['ui'])
var myApp = angular.module('myApp',...