AngularJS Remove specific value from array

Today, We want to share with you AngularJS Remove specific value from array.In this post we will show you Removing Elements from AngularJS Arrays, hear for Remove a specific item from an array in AngularJS we will give you demo and example for implement.In this post, we will learn about How to delete a value from an array in AngularJS with an example.

AngularJS Remove specific value from array

There are the Following The simple About AngularJS Remove specific value from array Full Information With Example and source code.

As I will cover this Post with live Working example to develop Remove specific value from array using AngularJS, so the AngularJS: Remove Element from an Array for this example is following below.

Also Read :  how to call factory method from controller in angularjs

Example 1: Remove an item or object from an array

remove function in markup

<a class="btn" ng-click="remove(myitem)">Delete</a>
<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
//Then in controller:

$scope.remove = function(myitem) { 
  var get_index = $scope.members.indexOf(myitem);
  $scope.members.splice(get_index, 1);     
}

Example 2: Removing Elements from an Array in AngularJS


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
  var app = angular.module("myMemberList", []); 
</script>
<h2>Angularjs Removing Elements from an Array</h2>
<div ng-app="myMemberList"  ng-init="members = ['Jaydeep Gondaliya','Krunal Sisodariya','Ankit Kathiriya']">
  <ul>
    <li ng-repeat="x in members">{{x}}
      <span ng-click="members.splice($index,1)">×</span>
    </li>
  </ul>
  <input ng-model="addMember">
  <button ng-click="members.push(addMember)">Add</button>
</div>
<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
<p>Click the little Clso Icon Like x to remove/delete an item from the Members list.</p>

</body>
</html>

Example 3: angular remove item from array by value

HTML Part

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
  <title>angularjs remove object from array by property</title>
    <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="membersController">
      <ul>
        <li data-ng-repeat="member in members">
          {{member}}
          <button data-ng-click="removeMember($index)">Remove</button>
        </li>
      </ul>
      <input data-ng-model="newMember"><button data-ng-click="addMember(newMember)">Add</button>
    </div>
	<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
  </body>
</html>

JavaScript

"use strict";

var demo = angular.module("demo", []);

function membersController($scope){
  $scope.members = [
    "Jaydeep",
    "Krunal",
    "Ankit",
    "Chirag",
    "Dhaval"
  ];

  $scope.addMember = function(item){
    $scope.members.push(item);
    $scope.newMember = null;
  }

  $scope.removeMember = function(index){
    $scope.members.splice(index, 1);
  }
}

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Vue js Toggle switch Update DB field using Ajax

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AngularJS Remove specific value from array.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]