Angular: Empty Fiddle

http://angularjs.org/

by jerrade

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-controller="AddStoreController">
    <table class="table">
        <thead ng-repeat="field in fields">
            <tr>
                <th> {{field.id}}
                    <select ng-model="field.day">
                         <option value='day1'>day1</option>
                         <option value='day2'>day2</option>
                    </select> 
                    <input type='text' ng-model="field.day"></input>
                </th>
                <th>
                    <select ng-model="field.month"></select>
                </th>
                <th>
                    <select ng-model="field.morning"></select>
                </th>
                <th>
                    <select ng-model="field.eveningOpen"></select>
                </th>
                <th>
                    <select ng-model="field.eveningClosing"></select>
                </th>
                <th>
                    <input type="checkbox" ng-checked="field.checkMorning" />
                </th>
                <th>
                    <input type="checkbox" ng-checked="field.checkEvening" />                                        
                </th>
            </tr>
        </thead>
    </table>
                        
    <!-- add extra field -->
    <button class="btn" ng-click="addNew()">add extra field</button>

    <!-- delete last field -->
    <button ng-show="fields.length > 0" class="btn" ng-click="deleteLast()"c>remove last extra field</button>
</div>

JavaScript

var myApp = angular.module('myApp',[]);
    myApp.controller('AddStoreController', ['$scope', function($scope) {
    $scope.fields = [];
$scope.test = 'test2';    
    $scope.addNew = function() {
        var newItemNo = $scope.fields.length+1;
        //$scope.fields.push({'id' : ''+newItemNo});
        
        $scope.fields.push(
            {               'id'             : ''+newItemNo,
                            'day'            :'day'+newItemNo,
                            'month'          : 'month'+newItemNo,
                            'morning'        : 'morning'+newItemNo,
                            'eveningOpen'    : 'eveningOpen'+newItemNo,
                            'eveningClosing' : 'eveningClosing'+newItemNo,
                            'checkMorning'   : false,
                            'checkEvening'   : true
                        }
                      );

        console.log($scope.fields);
    };

    $scope.deleteLast = function() {
        $scope.fields.pop();
    };
}]);