AngularJS tutorial: Display multiple inputs using ng-repeat based on a specified number

Question

AngularJS tutorial: Display multiple inputs using ng-repeat based on a specified number

I am new to AngularJS and I have a question about how to utilize the ng-repeat feature.

Most examples I find demonstrate reading from a service and then using ng-repeat to loop over that data.

In my scenario, an admin can create an invitation for guests and set a property called:

total_in_party = 4;

Based on the value of "total_in_party", I want to display 3 input fields for each guest in the party.

For example:

<div ng-repeat="guest in party">
  <input type="text" ng-model="guest.first_name" />
  <input type="text" ng-model="guest.last_name" />
  <select ng-model="selectedGuestMeal" ng-options="meal.id as meal.name for meal in meals"></select>
</div>

In this instance, it should generate those 3 input fields 4 times.

I believe I am close, but I am unsure how to create the party object if there is no existing data stored in it?

If I am approaching this problem incorrectly, please do not hesitate to provide guidance!

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

I recently encountered this very issue and found a solution by creating an array of guest objects within the scope and binding it to a form using ng-repeat.

To see a working example of my solution, you can visit: http://plnkr.co/edit/2aYSLYe0IcRGXR7Lm0HR?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.numberOfGuests = 1;
  $scope.guests = [];

  addGuests($scope.numberOfGuests);

  // Watch for changes in the number of guests and update the array accordingly
  $scope.$watch('numberOfGuests', function (newValue, oldValue) {
    if (!newValue) {
      return;
    }

    newValue = parseInt(newValue, 10);
    oldValue = parseInt(oldValue, 10);

    if (!isNaN(oldValue) && newValue > oldValue) {
      var numberOfGuests = newValue - oldValue;
      addGuests(numberOfGuests);
    } else {
      $scope.guests.length = newValue;
    }
  });

  function addGuests(numberToAdd) {
    if (!isNaN(numberToAdd) && numberToAdd > 0) {
      for (var i = 0; i < numberToAdd; i++) {
        $scope.guests.push({});
      }
    }
  }
});

Here is how the view looks:

<body ng-controller="MainCtrl">
  <form>
    <p>Number of Guests <input type="number" ng-model="numberOfGuests" ></p>
    <table>
      <tr ng-repeat="guest in guests track by $index">
        <td>{{$index + 1}}</td>
        <td><input type="text" ng-model="guest.name"></td>
        <td><input type="text" ng-model="guest.email"></td>
      </tr>
    </table>
  </form>
  <pre>{{guests | json}}</pre>
</body>

Answer 2

I recently encountered this very issue and found a solution by creating an array of guest objects within the scope and binding it to a form using ng-repeat.

To see a working example of my solution, you can visit: http://plnkr.co/edit/2aYSLYe0IcRGXR7Lm0HR?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.numberOfGuests = 1;
  $scope.guests = [];

  addGuests($scope.numberOfGuests);

  // Watch for changes in the number of guests and update the array accordingly
  $scope.$watch('numberOfGuests', function (newValue, oldValue) {
    if (!newValue) {
      return;
    }

    newValue = parseInt(newValue, 10);
    oldValue = parseInt(oldValue, 10);

    if (!isNaN(oldValue) && newValue > oldValue) {
      var numberOfGuests = newValue - oldValue;
      addGuests(numberOfGuests);
    } else {
      $scope.guests.length = newValue;
    }
  });

  function addGuests(numberToAdd) {
    if (!isNaN(numberToAdd) && numberToAdd > 0) {
      for (var i = 0; i < numberToAdd; i++) {
        $scope.guests.push({});
      }
    }
  }
});

Here is how the view looks:

<body ng-controller="MainCtrl">
  <form>
    <p>Number of Guests <input type="number" ng-model="numberOfGuests" ></p>
    <table>
      <tr ng-repeat="guest in guests track by $index">
        <td>{{$index + 1}}</td>
        <td><input type="text" ng-model="guest.name"></td>
        <td><input type="text" ng-model="guest.email"></td>
      </tr>
    </table>
  </form>
  <pre>{{guests | json}}</pre>
</body>

Answer 3

Answer №2

To create a list of guests in your Angular controller, you can define a guests property within the $scope object based on the value of total_in_party:

function initializeGuestList(totalInParty) {
  $scope.guests = [];
  for (var i = 0; i < totalInParty; i++) {
    $scope.guests[i] = {
      first_name: '',
      last_name: '',
      meal: ''
    };
  }
}

In your HTML template using ng-repeat, utilize $index to iterate through the guest list:

<div ng-repeat="guest in guests">
  <input type="text" ng-model="guests[$index].first_name" />
  <input type="text" ng-model="guests[$index].last_name" />
  <select ng-model="guests[$index].meal" ng-options="meal.id as meal.name for meal in meals"></select>
</div>

This code snippet has not been fully tested yet, but it is expected to function correctly :)

Answer 4

To create a list of guests in your Angular controller, you can define a guests property within the $scope object based on the value of total_in_party:

function initializeGuestList(totalInParty) {
  $scope.guests = [];
  for (var i = 0; i < totalInParty; i++) {
    $scope.guests[i] = {
      first_name: '',
      last_name: '',
      meal: ''
    };
  }
}

In your HTML template using ng-repeat, utilize $index to iterate through the guest list:

<div ng-repeat="guest in guests">
  <input type="text" ng-model="guests[$index].first_name" />
  <input type="text" ng-model="guests[$index].last_name" />
  <select ng-model="guests[$index].meal" ng-options="meal.id as meal.name for meal in meals"></select>
</div>

This code snippet has not been fully tested yet, but it is expected to function correctly :)

Answer 5

Answer №3

Monitor the total_in_party value and adjust the number of guests accordingly

JavaScript Code Snippet

$scope.$watch('total_in_party', function(newValue, oldValue) {
  if (newValue != null) {
    console.log(newValue, oldValue);
    if (newValue > oldValue) { //add
      var difference = newValue - oldValue;
      for (var i = 0; i < difference; i++) {
        $scope.party.push({
          first_name: "",
          last_name: "",
          selectedGuestMeal: null
        });
      }
    } else if (newValue < oldValue) { //subtract
      var difference = oldValue - newValue;
      $scope.party.splice(0, difference);
    }
  }
});

Check out this plunkr demo for reference

Answer 6

Monitor the total_in_party value and adjust the number of guests accordingly

JavaScript Code Snippet

$scope.$watch('total_in_party', function(newValue, oldValue) {
  if (newValue != null) {
    console.log(newValue, oldValue);
    if (newValue > oldValue) { //add
      var difference = newValue - oldValue;
      for (var i = 0; i < difference; i++) {
        $scope.party.push({
          first_name: "",
          last_name: "",
          selectedGuestMeal: null
        });
      }
    } else if (newValue < oldValue) { //subtract
      var difference = oldValue - newValue;
      $scope.party.splice(0, difference);
    }
  }
});

Check out this plunkr demo for reference

AngularJS tutorial: Display multiple inputs using ng-repeat based on a specified number

Answer №1

Answer №2

Answer №3

Similar questions

Guide to setting up Mongodb with mongoose in the latest Next.js 13.3 update

Synchronously executing Twitter posts

Obtain attributes from an array of objects organized by the individual objects

Utilizing AngularJS to dynamically bind one view to various data models at different intervals

Refresh your AngularJS Bindonce directives with the power of the refreshOn attribute

A self-destructing javascript/jquery function that removes itself after running

Data not being properly transmitted in React Express GET request

Updating multiple subdocuments with Mongoose

Troubleshooting: Firefox not executing AJAX call in onchange function

How to link a JavaScript file within a PHP document

Using Javascript to automatically replace content when the page is loaded

Troubleshooting CORS Problem in VUE JS 3 while Making API Request from Localhost to External API服务

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

The unpredictability and variability of AngularJS templateURL values

Filtering data in AngularJS ui-grid 3.x using an input box

Ensuring Uniform Card Sizes in Bootstrap 4 for Multiple or Single Cards

Mongoose Troubles in NodeJS

Issue with processing secure 3D payments on live mode in Stripe

Creating an Angular reactive form with checkboxes and initializing a formArray with an existing array

Exploring the Power of Elasticsearch with Datatables