How to add and remove a list using AngularJS

Manideepgoud
Posted by Manideepgoud under AngularJS category on | Points: 40 | Views : 704
In the below code we are going to see how to add items and remove items using angularjs.

To add an item we use
 $scope.AddItem = function () {
$scope.names.push($scope.Addme);
}

To Remove an item we use
$scope.RemoveItem = function (x) {
$scope.names.splice(x, 1);
}


<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Dropdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.names = ["DotNetFunda", "ITFunda", "TechFunda","IndianConsumerComplaints"];
$scope.AddItem = function () {
$scope.names.push($scope.Addme);
}
$scope.RemoveItem = function (x) {
$scope.names.splice(x, 1);
}
})
</script>
</head>
<body>
<p>AngularJS Application</p>
<div ng-controller="myctrl">
<ul>
<li ng-repeat="x in names">{{x}}<span ng-click="RemoveItem($index)">&times;</span></li>
</ul>
<input ng-model="Addme"/>
<button ng-click="AddItem()">Add</button>
</div>
</body>
</html>

Comments or Responses

Login to post response