Using index value as parameter in append function within angular js

I attempted to develop a chat box in Angular, and although I was able to create it, something feels wrong. When I click on the members, it displays a different member than expected. Could someone please review my code? Here is the link to the Plunker:

<a href="http://plnkr.co/edit/TzPY1WNov1JiPGtoMccS?p=preview" rel="nofollow">link</a>

Answer №1

$index in UI does not necessarily correspond to the actual index of the item in the data array, especially after using ngRepeat and orderBy. For example, selecting the artist name "Hassum Harrod" may give a $index of 2, but the same data is actually at index 3 in your data.json file. It's important to pass the item itself to your AppendText(item) function. Check out the modified code on this link.

I hope this clarifies things.

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

Adjusting or cropping strokes in a JavaScript canvas

I am working with a transparent canvas size 200x200. The object is being drawn line by line on this canvas using the solid stroke method (lineTo()). I'm in need of making this object full-width either before or after ctx.stroke();. ...

Tips for identifying when input fields have been altered within an AngularJS application

On my new page, users can input data without using a form. For example: <input type='text' ng-model='ExpReport.ReportName' /> <input type='text' ng-model='ExpReport.startdate' /> There is an exit button ...

Waiting for an Element to Become Visible in Selenium-Webdriver Using Javascript

When using selenium-webdriver (api docs here), how can you ensure that an element is visible before proceeding? Within a set of custom testing helpers, there are two functions provided. The first function successfully waits for an element to exist, howeve ...

Accessing HP ALM with REST and JavaScript on a local server: A step-by-step guide

I am trying to access ALM using locally written JavaScript in the browser (IE11, Firefox) through the REST API, but I am unable to login. Below is the code snippet where I am attempting to request the LWSSO cookie with jQuery: var auth = btoa(USER+":"+PAS ...

Changing the dynamic boundaries does not produce any results in the 'react-leaflet' library

Encountered an issue while trying to utilize the react-leaflet's bounds property. In my scenario, the application has predefined initial bounds in the state (referred to as fallback bounds) which are passed during the first component render. The archi ...

Android canvas is experiencing a sudden freeze

My canvas-based javascript application is functioning on android, however, I am encountering a problem where dragging across the screen with my finger causes the entire web page to freeze. Is there a solution to prevent this issue from happening? ...

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Is there a way to access mongodb count results in nodejs so that the outcome can be easily retrieved by asynchronous requests? Currently, I am able to retrieve the result and update the database successfully. However, when it comes to accessing the varia ...

The chosen option does not equal the value retrieved by using jQuery's

I am perplexed by the situation at hand. It seems that there is a discrepancy in the selected option of my select element. Despite appearing as the empty default option on top, the inspected element reveals it displaying a value of 13. https://i.sstatic.n ...

Creating a script that automatically launches the terminal and executes specific commands

Can anyone help me with creating a file that, when clicked on, opens a command prompt and executes the following commands? cd desktop\discordBOT node . Many thanks in advance! ...

How to move rows between tables using AngularJS

Our dedicated team is currently working on enhancing functionalities in ServiceNow. One of our essential requirements involves transferring rows from the "Sending" table to the "Receiving" table, while also enabling the option to delete rows from the "Rece ...

What is the solution for untangling this complicated Javascript variable referencing issue?

Currently facing an issue that needs to be addressed: app.controller 'MainCtrl', ($scope, TestData) -> $scope.name = 'World' TestData.get(0).then (data)-> $scope.elem = data TestData.get(1).then (data)-> $scope ...

Tips for applying an active class to buttons using ng-click?

Here is the HTML code for the buttons. The taskfilter is the filter that controls how the buttons work when clicked and the class name is 'sel' <a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'sel':enabled}"> &l ...

Create a jQuery script that generates clickable links when a user is mentioned in the

Hey there, I've been incorporating this fantastic plugin created by Hawkee into my project. It functions similarly to Twitter, allowing users to @mention others. However, I'm encountering issues with the output when using the following method: u ...

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

The system cannot locate the "default" task. Please consider using the --force option to proceed. The process has been halted due to warnings

Below is the content of my gruntfile.js file var fs = require("fs"), browserify = require("browserify"), pkg = require("./package.json"); module.exports = function(grunt) { grunt.initConfig({ mochaTest: { test: { options: { ...

Ensure that the navigation bar remains consistent when switching between pages

My issue lies within the React components I am working with. Essentially, my goal is to create a Single Page Application (SPA) using ReactJS. While setting up authentication using auth0-js, I also established some routes for navigation. The layout is stru ...

Real-time changes may not be instantly reflected in the model update

I need to add two numbers together and display the sum in a third input field: HTML <div ng-app="myApp"> <div ng-controller="MainCtrl as mainCtrl"> Main {{mainCtrl.foo}} <br/> <input type="text" ng-model="mainCtrl.foo"/> ...

Determining the exact pixel height of a table row

Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border. I have tried using jQuery's .height(), ...

Setting the current date of a jQuery datepicker to the value of an input tag

I am looking to assign a value to an input tag that has a datepicker attached to it. Upon initialization of the datepicker, I want to set this value. Below is a hypothetical example of what I am trying to achieve: HTML: <input id="test" value="">&l ...

Problems arise with identification of asynchronous functions

My async functions have been used successfully in various projects, but when incorporating them into a new project, they suddenly stopped working. One of the functions causing trouble is: const ddbGet = async (params) => { try { const data ...