Angular - efficiently trims the array by removing everything except the required object

I'm having trouble removing contacts from my Phonebook app. Every time I use the deletePerson function, it deletes all contacts except the one I want to remove. Can someone please help me identify where I'm going wrong?

Here is a snippet of my contacts section:

<ul class="people-list">
    <li showhideoptions ng-repeat="person in people | filter: search | 
                                   orderBy: 'name' | orderBy:'friend':true">
        <h4>
            <span ng-show="person.friend==true" class="icon-star icon-left"></span>
            <span ng-show="person.friend==false" class="icon-user icon-left"></span>

        {{person.name}}

        <span ng-click="deletePerson($index)"
          class="icon-remove pull-right"></span>
          </h4>

    </li>
</ul>

This is the main controller along with the factory:

var app = angular.module('contactList');

app.factory('simpleFactory', function(){
    var people = [
            {name: 'Collin', city: 'Omaha', friend: false},
            {name: 'Alice', city: 'New York', friend: false},
            {name: 'Pasha', city: 'Moscow', friend: true},
            {name: 'Denis', city: 'St. Pete', friend: true}

    ];

    var factory = {};
    factory.getPeople = function() {
        return people;
    };

    return factory;
});

app.controller('MainController', function ($scope, simpleFactory) {

$scope.people = [];

init();

function init() {
    $scope.people = simpleFactory.getPeople();
}

$scope.addPerson = function() {
    $scope.people.push(
    {   name: $scope.newPerson.name, 
        city: $scope.newPerson.city,
        friend: false
    });
};

$scope.deletePerson = function($index) {
    $scope.people.splice($index, 1);
}
  });

UPDATE:

I've realized that the filter applied here:

 | filter: search | orderBy: 'name' | orderBy:'friend':true"

Is causing issues with the deletion process. If anyone has advice on how to resolve this problem, I would greatly appreciate it!

Answer №1

If you want to remove an item, you can do so by incorporating the following code:

HTML

 <span ng-click="removeItem(item)"
          class="delete-icon pull-right">
 </span>

JS

$scope.removeItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
}

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

Issues with the startCellEditMode function in React MUI are preventing successful activation

Working with a Datagrid in Material-UI, I have implemented edit buttons for each row within the actions of a column definition. Looking at the documentation, I found the startCellEditMode function in MUI which can be used like this: const handleEditClick ...

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

Create a specific part of a webpage that can be scrolled through

In a unique way, I have designed a page where the only way to navigate is by simply clicking. To achieve this, I have implemented the following custom CSS: body{ overflow:hidden; } However, I have encountered a problem where I am unable to scroll to ...

The child directive has the ability to interact with every parent directive

I am attempting to create a slider using angularJS. Within this slider, I have implemented a child directive with event listeners. Whenever the main event (mousedown) is triggered, it invokes a function from the parent directive through a controller and up ...

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

Sending a string data from client to a MongoDB database using Express.js and Node.js with the help of Sails framework

Need help with sending a string from client to mongoDB using Sails The "val" variable represents a string sent in real time from the client to the server database POST Form( is using HTML the best approach here? ) <!DOCTYPE html> <html> < ...

Implementing an animation feature to facilitate the item filtering process when clicked on

I have recently developed a filter gallery and I am encountering an issue with animating the filter items when clicking on buttons. The problem with my current code is that it only toggles the animation effect rather than smoothly animating each time a but ...

Issue with deactivating attribute through class name element retrieval

There are multiple input tags in this scenario: <input type="checkbox" class="check" disabled id="identifier"> as well as: <input type="checkbox" class="check" disabled> The goal is to remov ...

Create a cookie on a subdomain that is accessible by all other subdomains

I have been working on a NextJS project that involves multiple apps on separate subdomains. My objective is to enable single sign-on so that when I log in to one app, I am automatically signed in to all the others. We are utilizing nookies as our cookie ha ...

Received the item back from the database query

When I run the code below; var results = await Promise.all([ database.query("SELECT COUNT(amount) FROM transactions WHERE date >= now() - INTERVAL 1 DAY;"), database.query("SELECT COUNT(amount) FROM transactions WHERE date >= now() - INTER ...

Issues presenting themselves with Material UI Icons

I need some help with a problem I'm having. I'm trying to integrate my React app into an Angular app, and everything is working fine except for the material-ui/icons. They appear, but they are not displaying correctly! I have made sure to use th ...

collecting user input in React.js

After doing some research on React.js from this website, I stumbled upon a piece of code that left me puzzled. As far as I can tell, the checkbox for isGoing will be pre-filled as true (checked) and the numberOfGuests will be set to 2. However, I found m ...

[entity: undefined prototype] { type: 'clip', info: 'Watch my latest video!!' } using nodejs - multer

import routes from "./routes"; import multer from "multer"; const multerVideo = multer({ dest: "videos/" }); export const localsMiddleware = (req, res, next) => { res.locals.siteName = "Webtube"; res.locals.routes = routes; res.locals.user = { isA ...

Stop execution of asynchronous functions in React useEffect when dependent variables change

Picture a scenario where I have a user interface with two controls: a date picker (linked to a state date) and a dropdown (linked to a state filter) In my React application, I am utilizing the useEffect hook to make an API call using both the date and fil ...

Issue with firestore IN query when encountering NULL value

Is there a way to create a query that retrieves all documents without a value, whether it be null or ''? Within my table are three documents, each containing a field called a. https://i.sstatic.net/FGV0Z.png During an IN query, the document wit ...

Is there a way to convert an array into a single comma-separated value using parameters?

Is there a way to parameterize an array as a single name-value pair that is comma separated? I have tried using jQuery $.param, but it creates a parameter for each value in the array instead of just one. Unfortunately, it seems that there is no option or s ...

The video player will only start playing after the source has been changed if it was already in play

I am facing an issue with my video player that has thumbnails. The problem is that the video player does not start playing the selected video unless the video is already playing. This means I have to hit the play button first, and then select the thumbnail ...

Retain all decimal points when displaying currency in AngularJS

I am trying to format currency in a way that preserves all decimal places. For example, if the amount is: 123456.789, the desired output should be: 1,23,456.789 $ When using {{amount | currency:$}}, the output becomes: 1,23,456.78 $ [last digit removed] ...

Using the jQuery val() Function with a User-Defined Object

I have a class named ValueBox with a custom val() method that I implemented as shown below: function ValueBox(params) { ... $.extend(true, this, $('/* some HTML elements */')); ... var $inputBox = $('input[type=text]', this ...

Error: Unable to locate image module in REACT

Trying to troubleshoot image loading in a React project. Currently testing with an individual image, but plan to eventually store multiple images in an array for easier management. However, I'm encountering an issue where the image won't load and ...