Angular - set null items in array

Question

Why is this code working only once? When i reset an item the entire app freezes

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

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }    
    $scope.resetItem = function (x) {
        $scope.products[x]="";
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="resetItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

<p>Click the x to reset an item</p>

</body>
</html>

I've also tryed with ng-click='x = "" ' but it doesn't work. So, how can I set a null value to an item in this array?

Just pointing out the fact.... Welcome to the site, and remember we are taking time out of our day to help you for free. I am willing to put you on my trash list of people not to help. ;) And I already gave an answer. If it does not meet your needs, than maybe the question should state that you need the item to be in the array with an empty string. — epascarello
– epascarello, Commented Mar 15, 2017 at 17:11

Sachila Ranawaka · Accepted Answer · 2017-03-15 17:02:25Z

2

use track by $index in ng repeat to remove the duplicate.

Also use splice to remove the item from an array

var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.products.push($scope.addMe);
    }    
    $scope.resetItem = function (x) {
         $scope.products.splice(x,1);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
 
  <ul>
    <li ng-repeat="x in products track by $index">{{x}}<span ng-click="resetItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

<p>Click the x to reset an item</p>

answered Mar 15, 2017 at 17:02

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Over a year ago

The error was that I created duplicate when i set the second string empty. I solved with "track by $index", thank you very much.

epascarello · Accepted Answer · 2017-03-15 17:02:33Z

1

If you want to remove an item. You can remove it from the array with splice(index, numberOfItemsToRemove)

$scope.products.splice(x, 1)

answered Mar 15, 2017 at 17:02

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

Angular - set null items in array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related