Mengapa kode ini hanya berfungsi sekali? Ketika saya mengatur ulang item, seluruh aplikasi membeku

<!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>

Saya juga sudah mencoba dengan ng-click='x = "" ' tetapi tidak berhasil. Jadi, bagaimana saya bisa menetapkan nilai nol ke item dalam array ini?

0
Nicolas 15 Maret 2017, 19:57

2 jawaban

Jawaban Terbaik

Gunakan track by $index di ng repeat untuk menghapus duplikat.

Juga gunakan splice untuk menghapus item dari 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>
2
Sachila Ranawaka 15 Maret 2017, 17:02

Jika Anda ingin menghapus item. Anda dapat menghapusnya dari array dengan splice(index, numberOfItemsToRemove)

$scope.products.splice(x, 1)
1
epascarello 15 Maret 2017, 17:02