Clicking or changing with ng-click or ng-change does not store the array

I've recently developed a new auction form where users are required to fill in all the necessary fields. By clicking on the "Invite People" button, they can invite other saved users or send invitations via email. While the email functionality is working smoothly, I'm encountering some issues with the user invitation feature.

Here's the HTML section:

          <div ng-show="showBid" class="panel panel-default" ng-controller="NewAuctionController">
<div class="panel-heading">Invite Members</div>
<div class="panel-body">
    <ul class="list-group" ng-repeat="user in users">
        <li class="col-md-4" id="userlist" ng-hide="user.name == profile">
            <img ng-src="{{user.img}}" class="userImage">
            <div class="username"> {{user.name}}</div>
            <div class="userrole"> {{user.role}} </div>
            <div class="usercompany">{{user.company}}</div>
            <input type="checkbox" ng-model="user.isChecked" ng-click="insertinvited(user)">

</li>
</ul>

I have also attempted using ng-change, but encountered the same issue. The function insertinvited() is as follows:

                $scope.invitations=[];

$scope.insertinvited= function (user) {

    if(user.isChecked) {
        $scope.invitations.push(user.name);
    } else {
        var toDel = $scope.invitations.indexOf(user.name);
        $scope.invitations.splice(toDel,1);
    }
    console.log($scope.invitations);

};

When I check the array in the console, it seems to be working fine as expected.

However, when I attempt to use that array here:

<div ng-show="showBid" class="panel panel-default" >
    <div class="panel-heading">Members Selected:</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="invitation in invitations">
                <div class="listmail"> {{invitation}}</div>

            </li>
        </ul>
    </div>
</div>

The array appears to be empty, as when I pass the array to the controller and try to log it, it shows up as empty. Could anyone provide assistance?

Edit:

This is my complete HTML code:

... (Continued text)

And this is my entire controller:

... (Continued text)

});

Answer №1

Consider updating ng-click to ng-change

 <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

Additionally, I suggest making a change in your code snippet:

var toDelete = $scope.invitations.indexOf(user.name);
  $scope.invitations.splice(toDelete, 1);

Answer №2

The issue at hand could possibly be related to scope inheritance within angular JS.

To address this, consider making the following adjustments:

Within the controller, assign this to a variable like so:

var vm = this;

Then, utilize vm.invitations instead of $scope.invitations.

When using ng-repeat, implement the following:

ng-repeat="invitation in vm.invitations"

Answer №3

Every time you click, the array is being cleared.

Please eliminate this line:

$scope.invitations = [];

Instead, place it in the main body of the controller; this should resolve the issue (particularly when using ng-change).

Answer №4

The reason for this is the concept of prototypical inheritance in JavaScript. By utilizing var vm = this within the controller and changing $scope.invitations to vm.invitations in the controller as well as updating invitations in the HTML to vm.invitations, the problem will be resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the coordinates of the mouse cursor within a specific div element

Similar Questions: Determining Mouse Position Relative to a Div Getting the Mouse Position Using JavaScript in Canvas Is there a way to retrieve the mouse position within a canvas element with fixed dimensions and automatic margin? I am unable to ...

Implementing a DataTable filter functionality using external buttons or links

I want to enhance the search functionality of my table by incorporating a treeview style set of buttons or links next to it. This is how I envision it: Take a look at this design: https://i.sstatic.net/LAJXf.png Here's where it gets tricky. When I c ...

How can you change the text of a button in AngularJS until it finishes loading?

Is it possible to disable a button until it is fully loaded in AngularJS? I have created a directive to indicate the loading status of data and disable the button until the $http request is processed. However, I am facing an issue where the button automat ...

Techniques to dynamically insert database entries into my table using ajax

After acquiring the necessary information, I find myself faced with an empty table named categorytable. In order for the code below to function properly, I need to populate records in categoryList. What should I include in categoryList to retrieve data fro ...

Webpack 4 Failing to Properly Render Select Tag

I am encountering an issue with a basic select element that is not displaying correctly due to Webpack. The screenshot below illustrates the final rendered page source, where the closing tag for the select element has been incorrectly positioned before the ...

Tips for evaluating the RouteConfig and additional decorators within an Angular 2 Component

I'm facing a challenge in writing unit tests for my Angular 2 component. Specifically, I need to write a test that checks if the RouteConfig's path is set to '/documents'. Additionally, I want to verify if the template contains <rout ...

Updating the status in Reactjs

I need help with updating the status of a selected student in my code. I am able to retrieve the ID and status of the clicked student, but I am unsure of how to implement the update functionality. export const UPDATESTATUS = gql` mutation UpdateStatus($sta ...

Oops! The program encountered an issue where it couldn't access the "Point" property because it was undefined. This occurred while working with openlayers 3 and jsts on

I am currently working on implementing a buffer function for some features that have been drawn on a map following this particular example. However, I am encountering the following error: ERROR TypeError: Cannot read property 'Point' of undefin ...

Executing test cases in Protractor with failing results but displaying them as successful items

Can a test case be marked as passed even with known issues or limitations? I would like the test case to run with bugs but still show as "passed" in the report until it is fixed, or potentially leave it with the known issue indefinitely. ...

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

Ways to assign sx property to Icons using menu.map method in Material-UI?

Currently, I am working on designing a menu with icons in Material UI. Everything is functioning properly, but I am facing a challenge in understanding how to pass the sx prop into the Icon when using the map function. Here is an example: export const Me ...

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

Is there a way to align elements to the left and right within a <div> container?

Having trouble styling my website at . I can't seem to get the images to align with names underneath and bios on the right. My VS Code keeps flagging Float properties as errors, and I need some CSS help from someone more experienced. function conde ...

What is the best way to implement a toggle feature for my icon using jQuery and MaterializeCSS?

When using MaterializeCSS, there is a specific syntax for utilizing their premade icons. Take a look at this example: <i class="material-icons">expand_more</i> The framework recognizes the desired icon based on the text within the i tags. I a ...

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

Retrieving DOM Element in Angular from Freshly Loaded Template

Recently starting my journey with Angular, I have encountered a challenge when trying to access the DOM from a newly loaded template. Let me explain what's going on - index.html <div class="template" ng-app="myApp" ng-controller="myController"> ...

Displaying various data sets from data tables created using Ajax on Highcharts

I am currently working on integrating multiple data series into Highcharts' plot. I want to retrieve the data from an ajax self-calling function, which would allow for almost real-time updates to the charts without redrawing the entire chart each time ...

Struggling with main content not properly overlapping with nav bar in HTML and CSS code

Looking for assistance with centering the main content area on a webpage both vertically and horizontally. After adding a CSS nav bar, scroll bars appeared on the page and the main div lost its center positioning, seeming to be shifted down and to the rig ...

What is the reason for handlers not being able to work without passing parameters in React?

I recently made a discovery but I'm still puzzled about how it works. In the past, when creating React components, I used to follow this pattern: class App extends React.Component { state = { input: '' } onChangeHandler = event = ...

Is AJAX/JSON Referencing the Way to Go?

After making good progress in using JavaScript to fill in values, I've hit a roadblock. Despite checking my references, my html table isn't displaying any output. The goal is simple - extract values from a JSON retrieved by an API and insert the ...