FrAngular : tables2

HTML

<div ng-app="myApp" ng-controller="Ctrl">
    <table>
        <thead>
            <tr>
                <th>Browser</th>
                <th class="pct">%</th>
            </tr>
        </thead>
        <tbody ng-repeat="line in lines track by $index">
            <tr class="total">
                <td class="browser"><input type="text" ng-model="line.name"/>{{line.name}}</td>
                <td class="pct"><input type="text" ng-model="line.value"/>{{line.value}} %</td>
                <td class="pct"><input type="button" ng-click="suprow($index)" value="sup"/></td>
               
            </tr>
             <tr ng-repeat="det in line.details" class="detail">
                   <td class="browser"><input type="text" ng-model="det.name"/>{{det.name}}</td>
                  <td class="pct"><input type="text" ng-model="det.value"/>{{det.value}} %</td>
            </tr>
           
        <tbody>
    </table>
     <input type="button" ng-click="addrow()" value="ajouter"/>
</div>

CSS

table {
  font-size: 0.9em;
  margin: 1em;
}
th,td {
  padding: 0.3em;
}
th {
  background-color: #CCDDFF;
}
tr.total td {
  background-color: #EEEEFF;
}
td.pct,th.pct {
  text-align: right;
}
tr.detail td {
  font-size: 0.7em;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
    
    var browsers = [
        { 
            name: 'Chrome',
            total: 68.83,
            versions: [
                {name: '23.0.1271.97', value: 46.68},
                {name: '18.0.1025.166', value: 10.97},
                {name: '23.0.1271.101', value: 10.66},
            ]
        },
        { 
            name: 'Firefox',
            total: 17.87,
            versions: [
                {name: '17.0', value: 70.24},
                {name: '16.0', value: 12.50},
            ]
        },
        { 
            name: 'Safari',
            total: 4.36,
            versions: [
                {name: '536.26.17', value: 36.59},
                {name: '8536.25', value: 36.59},
                {name: '7534.48.3', value: 19.51},
            ]
        },
    ];
    
    var lines = [];
   /* angular.forEach(browsers, function(browser, keyBrowser) {
        lines.push({type: 'total', name: browser.name, value: browser.total});
        angular.forEach(browser.versions, function(version, keyVersion) {
            lines.push({type: 'detail', name: browser.name + ' ' + version.name, value: version.value});
        });
    });*/
    angular.forEach(browsers, function(browser, keyBrowser) {
        lines.push({name: browser.name, value: browser.total,
         details:angular.forEach(browser.versions, function(version, keyVersion) {
            return {name: browser.name + ' ' + version.name, value: version.value};
        })
        });
       
    });
    $scope.lines = lines;
    var newline1={name:null,value:0.00 , details:[
    	{name:null,value:0.00},{type:'detail',name:null,value:0.00}
    ]};
    //var newline2={type:'detail',name:null,value:0.00};
     //var newline3={type:'detail',name:null,value:0.00};
 
    $scope.addrow = function() {
    	$scope.lines.push({name:null,value:0.00 , details:[
    	{name:null,value:0.00},{type:'detail',name:null,value:0.00}
    ]});
...