Below is a short example how you create multiple dynamic table using AngularJS and perform CRUD operations.
Good Day :)
<div ng-app="demo" ng-controller="DemoCtrl"> <button style="margin-bottom:20px;" ng-click="addNewPath()">Add New Table</button> <table ng-repeat="reportObj in recordReport" border="1" style="margin-bottom:50px;width:50%"> <thead> <tr> <th>Subject</th> <th>Marks</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="option in reportObj.report"> <td> <select ng-model="option.subject" ng-options="item for item in subjectList"></select> </td> <td> <input type="text" ng-model="option.marks" name="value" placeholder="Enter Marks"> </td> <td> <button ng-click="($index+1)!=reportObj.report.length?removeOption($index, reportObj.report):addNewRow(reportObj)"> {{($index+1)!=reportObj.report.length?'Remove':'Add'}} </button> </td> </tr> </tbody> </table> </div>
angular.module('demo', []).controller('DemoCtrl', function($scope) { $scope.subjectList = ["Math","English","Computer"]; $scope.report = [{"subject":"Math","marks":""}]; $scope.recordReport = [{'report':angular.copy($scope.report)}]; $scope.addNewRow = function(obj) { obj.report.push({"subject":"Math","marks":""}); }; $scope.addNewPath= function() { $scope.recordReport.push({'report':angular.copy($scope.report)}); }; $scope.removeOption = function(id, obj) { obj.splice(id, 1); }; });
Good Day :)
0 Comments