Creating dynamic emails using ng-repeat data binding

Question

Creating dynamic emails using ng-repeat data binding

I'm struggling to bind the newly added emails to $scope.emails as it does not contain the new email user added. Any suggestions on how to solve this issue?

// On the server side, emails is a List and email is a string

Initially, I tried binding with ng-model="email" but

However, the following code did not work:

$scope.contactInformation.Emails.push(email); --> throws an error about duplicates

<div ng-repeat="email in emails">
    <div class="form-group">
    <label for="email">Email</label>
    <div class="input-group input-group-sm input-group-minimal">
         <span class="input-group-addon">
               <i class="linecons-mail"></i>
         </span>
         <input type="text" class="form-control" ng-model="email" />
     </div>
     <button class="btn btn-primary" ng-show="$last" ng-click="AddEmail()">Add Email</button>

Controller.js

// When retrieved on the server side, modelParams.ContactInformation.Emails is initialized as new List(string)()

$scope.emails = modelParams.ContactInformation.Emails;

$scope.AddEmail = function () {
    $scope.contactInformation.Emails.push({ email: null });
};

javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

To prevent any confusion, I am revising the answer to provide clarity on how it should be implemented - simply fill in the necessary information to tailor it to your specific situation.

controller.js

// assuming 'emails' is an array of strings (whether defined locally or fetched from a server)
$scope.emails = ["email1", "email2", ...];

$scope.addEmail = function(){
  $scope.emails.push(""); // add an empty string as a new email
}

The structure of the HTML code is mostly correct. However, I recommend moving the "add" button outside of the ng-repeat div instead of relying on $last:

<div ng-repeat="email in emails track by $index">
  <input type="text" ng-model="email" />
</div>
<button ng-click="addEmail()">Add Email</button>

EDIT:

The initial example provided would not work as expected because the ng-model within the ng-repeat binds to a primitive (string) value of email. This can be resolved in two ways:

Approach 1

Create an array of objects. If you receive an array of strings from the server, convert it to an array of objects like this:

$scope.emails = [];
angular.forEach(arrayOfEmailStrings, function(value, key){ 
  $scope.emails.push({value: value});
});

Then access it using:

<input type="text" ng-model="email.value" />

Approach 2

Utilize the $index property:

<input type="text" ng-model="emails[$index]" />

Answer 2

To prevent any confusion, I am revising the answer to provide clarity on how it should be implemented - simply fill in the necessary information to tailor it to your specific situation.

controller.js

// assuming 'emails' is an array of strings (whether defined locally or fetched from a server)
$scope.emails = ["email1", "email2", ...];

$scope.addEmail = function(){
  $scope.emails.push(""); // add an empty string as a new email
}

The structure of the HTML code is mostly correct. However, I recommend moving the "add" button outside of the ng-repeat div instead of relying on $last:

<div ng-repeat="email in emails track by $index">
  <input type="text" ng-model="email" />
</div>
<button ng-click="addEmail()">Add Email</button>

EDIT:

The initial example provided would not work as expected because the ng-model within the ng-repeat binds to a primitive (string) value of email. This can be resolved in two ways:

Approach 1

Create an array of objects. If you receive an array of strings from the server, convert it to an array of objects like this:

$scope.emails = [];
angular.forEach(arrayOfEmailStrings, function(value, key){ 
  $scope.emails.push({value: value});
});

Then access it using:

<input type="text" ng-model="email.value" />

Approach 2

Utilize the $index property:

<input type="text" ng-model="emails[$index]" />

Creating dynamic emails using ng-repeat data binding

Controller.js

Answer №1

EDIT:

Approach 1

Approach 2

Similar questions

Swap the content of one div with another div using client-side code only

Sorting rows by words and numbers in JavaScript explained

The timer will automatically refresh when the page is refreshed

How can I ensure that my rendering only occurs after a full input has been entered? Implementing a delayed render() in ReactJS

Assigning a unique identifier to each table row when iterating through a collection using

Maintaining the selected radio button based on previous input with the use of jQuery or PHP

Exploring ways to programmatically include questions in the meta.js file of a Vue Webpack template

"Mastering the art of utilizing Async in combination with waterfall and Recursion in node

Running karma tests in an angularjs environment may require additional http requests from the configuration

Analyzing elements within an array of objects

Effortlessly transforming a massive JSON into an Array using ReactJS

Assembling back-end interfaces

Tips for styling a React JS component class

An interactive chatbox powered by AngularJS, WebAPI, and SignalR, similar to the

Extracting data from website's table using JavaScript and opening the link in href

Start the setInterval function again after clearing it with the clearInterval button, but wait for

Tips for sending dynamic column and row information to antd table

Load images easily using jQuery

What could be causing the misalignment between the desired output and the response from the AJAX request

Whenever I click on <a href="whatever.aspx"></a>, I would like the page to be displayed within the current page