How to generate a collection of identical services in AngularJS

Question

How to generate a collection of identical services in AngularJS

One of the features I have is a Service that can be added by a user, either one or multiple services.

There is a button available for users to add a new Service:

<button type="button" class="btn btn-success" ng-click="addService()">
    <span class=" glyphicon glyphicon-plus">
    </span>Add Service
</button>

Upon clicking the Add Service button, Angular will create a new Service in a list of services.

Additionally, there are two text areas where users can input information about the Service:

<label for="usr">Name:</label>
<input type="text" class="form-control" id="name"></br>
<label for="usr">Service:</label>
<input type="text" class="form-control" id="service"></br>

When the Add Service Button is clicked, a new Service Button should be generated with these text areas.

Is there a way to generate this and add the new Service to the list of services?

javascript angularjs

Answer 1

Answer №1

const myServices = [];
const addMyService = function() {
    const newService = {
        serviceName : 'example name',
        serviceType : 'example type'
    };
    myServices.push(newService);
}

Here is the corresponding HTML structure:

<div ng-repeat="service in myServices"><label for="usr">Name:</label>
<input type="text" class="form-control" value="{service.serviceName}"></br>
<label for="usr">Service Type:</label>
<input type="text" class="form-control" value="{service.serviceType}"></br></div>

Answer 2

const myServices = [];
const addMyService = function() {
    const newService = {
        serviceName : 'example name',
        serviceType : 'example type'
    };
    myServices.push(newService);
}

Here is the corresponding HTML structure:

<div ng-repeat="service in myServices"><label for="usr">Name:</label>
<input type="text" class="form-control" value="{service.serviceName}"></br>
<label for="usr">Service Type:</label>
<input type="text" class="form-control" value="{service.serviceType}"></br></div>

Answer 3

Answer №2

To achieve two-way binding of fields to a scope object, you would implement the ng-model directive in AngularJS.

<label for="usr">Name:</label>
<input ng-model="newService.name"></br>
<label for="usr">Service:</label>
<input ng-model="newService.service"></br>

In your controller:

$scope.addService = function() {
     // Copy and push the newService object to an array
    $scope.services.push(angular.copy($scope.newService));
    // Reset newService object to clear fields
    $scope.newService = {};   

}

If utilizing a form, you can leverage Angular validation by moving the ng-click event to ng-submit on the form. This ensures that ng-submit will only trigger if validation passes.

Answer 4

To achieve two-way binding of fields to a scope object, you would implement the ng-model directive in AngularJS.

<label for="usr">Name:</label>
<input ng-model="newService.name"></br>
<label for="usr">Service:</label>
<input ng-model="newService.service"></br>

In your controller:

$scope.addService = function() {
     // Copy and push the newService object to an array
    $scope.services.push(angular.copy($scope.newService));
    // Reset newService object to clear fields
    $scope.newService = {};   

}

If utilizing a form, you can leverage Angular validation by moving the ng-click event to ng-submit on the form. This ensures that ng-submit will only trigger if validation passes.

How to generate a collection of identical services in AngularJS

Answer №1

Answer №2

Similar questions

Conceal the div element if the screen size drops below a certain threshold

Exploring AngularJS's capabilities with Cross Domain POST requests

Exploring the power of Angular through the use of promises with multiple

Encountering problems with binding AngularJS directive controller functions while utilizing ng-repeat

What sets apart the concept of asynchrony in C# from that in JavaScript?

Error encountered in Parse cloud code: Unexpected character sequenceJavascript

Using Three.js to create a React button positioned above a canvas

A guide to filtering an Array based on Name using AngularJS

Is there a way to determine if a file is an audio or video file using Vue.js by examining its URL?

I am encountering an issue with CreateJS where I receive the error message: "createjs is not defined"

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

A step-by-step guide on extracting nested ASP.NET DataGrid values with JavaScript

The Angular filter does not seem to work as expected when combined with the ng-if

Collect form input data containing a binary image and showcase it in a view using webapi

How to sort multiple columns in AngularJS while keeping records 'Always on Top'?

Creating a duplicate of the Object in order to include a new key and value pair

Is it possible to use JQuery ScrollTop while in the midst of an animation?

Launching an Electron Window and Recording the Closing Event

Issue with Laravel retrieving POST data from Angular

Learn how to utilize the value of an element attribute to toggle the visibility of a div using AngularJS