Using ng-repeat to dynamically generate rows in a table

Question

Using ng-repeat to dynamically generate rows in a table

<div class="workTime-row" ng-repeat="worktime in doctor.shifts">
    <input type="text" class="form-control" ng-model="worktime.workDays" multiple>
    <input type="text" class="form-control" ng-model="worktime.workFrom">
    <input type="text" class="form-control" ng-model="worktime.workTo">
    <span class="glyphicon glyphicon-plus glyph_size" ng-click="addWorkTime()" aria-hidden="true"></span>
</div>

I am exploring Angular and need help creating a dynamic form that can add new rows on click of the plus icon. I do not have data to fetch, just want to dynamically add rows with specific fields upon clicking the plus icon. Any tips or scripts would be much appreciated.

javascript angularjs

Answer 1

Answer №1

Alright, let me give you the concise answer:

let application = angular.module('main', []); 
application.controller('controller', function ($scope) {
    // creating an object to store the collection
    $scope.doctor = {
        shift : {
            worktimes: []
        }
    };

    $scope.addWorkTime = function() {
        // adding an element to the end of the array
        $scope.doctor.shift.worktimes.push( {
            workDay: 1,
            workFrom: '9:00',
            workTo: '22:00'
        });
    };
    // adding an initial row - without rows, there's no add button!
    $scope.addWorkTime();
});

Check out this jsfiddle link for a visual representation.

The detailed explanation reveals that there are some issues in your html code, indicating that you're just beginning with Angular. When you use: ng-repeat="worktime in doctor.shift" ..."worktime" is a temporary variable used only for looping through the object or collection. So, in the looped template, you should bind to properties like: "worktime.workFrom". I made adjustments to your html and data model to ensure everything functions correctly and attempted to understand your intended outcome.

Furthermore, for the options in your select box, it's best to utilize "ngOptions" instead of "ngRepeat" : Refer to this documentation for more details.

Answer 2

Alright, let me give you the concise answer:

let application = angular.module('main', []); 
application.controller('controller', function ($scope) {
    // creating an object to store the collection
    $scope.doctor = {
        shift : {
            worktimes: []
        }
    };

    $scope.addWorkTime = function() {
        // adding an element to the end of the array
        $scope.doctor.shift.worktimes.push( {
            workDay: 1,
            workFrom: '9:00',
            workTo: '22:00'
        });
    };
    // adding an initial row - without rows, there's no add button!
    $scope.addWorkTime();
});

Check out this jsfiddle link for a visual representation.

The detailed explanation reveals that there are some issues in your html code, indicating that you're just beginning with Angular. When you use: ng-repeat="worktime in doctor.shift" ..."worktime" is a temporary variable used only for looping through the object or collection. So, in the looped template, you should bind to properties like: "worktime.workFrom". I made adjustments to your html and data model to ensure everything functions correctly and attempted to understand your intended outcome.

Furthermore, for the options in your select box, it's best to utilize "ngOptions" instead of "ngRepeat" : Refer to this documentation for more details.

Using ng-repeat to dynamically generate rows in a table

Answer №1

Similar questions

Comparing the size of an array property in Mongoose with another property's size

NodeJs and the Power of Event Emitters

Exploring touch events and input focusing on mobile devices using JavaScript

Combining two arrays of objects using unique keys in Angular 8

Step-by-step guide on retrieving JSONP data from Angular service within view by utilizing expressions

Using Browser.wait() in Protractor to wait for a specific ID while the class changes

Which is the better choice for developing a progressive web app - Django or Wagtail?

Retrieve the HTML content starting from the nth tag and beyond

How can I implement a jQuery popup that prompts users to log in or register if they are not currently authenticated?

Trigger Chrome Extension Background Page Using a Message

Retrieve an array of specific column values from an array of objects using Typescript

Converting JSON date format while deducting one day

Straining data in text input fields using bootstrap

Learn the steps to designing a responsive class using Angular2's ngClass feature

The dynamic text feature in my Angular Material gridlist functions perfectly in CodePen, however, it fails to work when

"Expand your list in AngularJS by automatically adding more items if the ng-repeat count is

Sometimes the last column might not be visible in an HTML table within a collapsed Bootstrap element while using Chrome browser

Challenges when testing Angular controllers using Jasmine - modular problem

file system mistakenly saves document in incorrect directory

clicking on a link with the symbol "#" in the href attribute in Firefox prevents the setter