Tôi đang cố gắng viết một chức năng cho phép tôi loại bỏ một mục khi nhấp vào nút nhưng tôi nghĩ rằng tôi đang bị lẫn lộn với chức năng - tôi có sử dụng $digestkhông?

HTML & app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

Để xóa mục bạn cần xóa nó khỏi mảng và có thể chuyển bdaymục vào chức năng xóa của bạn trong đánh dấu. Sau đó, trong trình điều khiển tìm kiếm chỉ mục của mục và loại bỏ khỏi mảng

<a class="btn" ng-click="remove(item)">Delete</a>

Sau đó, trong bộ điều khiển:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

Angular sẽ tự động phát hiện sự thay đổi của bdaysmảng và thực hiện cập nhậtng-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: Nếu thực hiện cập nhật trực tiếp với máy chủ sẽ sử dụng dịch vụ bạn tạo bằng cách $resourcequản lý cập nhật mảng đồng thời cập nhật máy chủ

Đây là một câu trả lời đúng:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

Trong câu trả lời của @ charlietfl. Tôi nghĩ đó là sai vì bạn vượt qua $indexnhư paramter nhưng thay vào đó bạn sử dụng điều ước trong bộ điều khiển. Sửa lỗi cho tôi nếu tôi sai :)

Trong trường hợp bạn đang ở trong một lặp lại ng

bạn có thể sử dụng một tùy chọn lót

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index được sử dụng bởi angular để hiển thị chỉ số hiện tại của mảng bên trong ng-repeat

Sử dụng $indexhoạt động hoàn toàn tốt trong các trường hợp cơ bản và câu trả lời của @ charlietfl là tuyệt vời. Nhưng đôi khi,$index không đủ.

Hãy tưởng tượng bạn có một mảng duy nhất, mà bạn đang trình bày ở hai ng-repeat khác nhau. Một trong những ng-repeat đó được lọc cho các đối tượng có thuộc tính trung thực và đối tượng kia được lọc cho thuộc tính giả. Hai mảng được lọc khác nhau đang được trình bày, xuất phát từ một mảng gốc duy nhất. (Hoặc, nếu nó giúp hình dung: có lẽ bạn có một mảng người và bạn muốn một lần lặp lại cho phụ nữ trong mảng đó và một lần nữa cho những người đàn ông trong cùng một mảng .) Mục tiêu của bạn: xóa đáng tin cậy khỏi mảng ban đầu, sử dụng thông tin từ các thành viên của các mảng được lọc.

Trong mỗi mảng được lọc, $ index sẽ không phải là chỉ mục của mục trong mảng ban đầu. Nó sẽ là chỉ mục trong mảng con được lọc . Vì vậy, bạn sẽ không thể nói chỉ mục của người đó trong peoplemảng ban đầu , bạn sẽ chỉ biết chỉ số $ từ womenhoặcmen mảng mảng phụ. Cố gắng xóa bằng cách sử dụng và bạn sẽ có các mục biến mất từ ​​mọi nơi trừ nơi bạn muốn. Phải làm sao?

Nếu bạn đủ may mắn khi sử dụng mô hình dữ liệu bao gồm một mã định danh duy nhất cho từng đối tượng, thì hãy sử dụng mô hình đó thay vì $ index, để tìm đối tượng và splice nó ra khỏi mảng chính. (Sử dụng ví dụ của tôi dưới đây, nhưng với định danh duy nhất đó.) Nhưng nếu bạn không may mắn như vậy?

Angular thực sự tăng từng mục trong một mảng lặp lại ng (trong mảng chính, mảng gốc) với một thuộc tính duy nhất được gọi $$hashKey. Bạn có thể tìm kiếm mảng ban đầu cho một trận đấu trên$$hashKey mục bạn muốn xóa và loại bỏ nó theo cách đó.

Lưu ý rằng $$hashKey là một chi tiết triển khai, không được bao gồm trong API được xuất bản cho ng-repeat. Họ có thể loại bỏ hỗ trợ cho tài sản đó bất cứ lúc nào. Nhưng có lẽ là không. :-)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object's hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

Gọi với:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

EDIT: Sử dụng một chức năng như thế này, phím nào $$hashKeythay vì tên thuộc tính dành riêng cho mô hình, cũng có lợi thế đáng kể về việc làm cho chức năng này có thể sử dụng lại trên các mô hình và bối cảnh khác nhau. Cung cấp cho nó với tham chiếu mảng của bạn, và tham chiếu mục của bạn, và nó sẽ chỉ hoạt động.

Tôi thường viết theo phong cách như vậy:

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

Hy vọng điều này sẽ giúp Bạn phải sử dụng dấu chấm (.) Giữa $ scope và [yourArray]

Dựa trên câu trả lời được chấp nhận, điều này sẽ làm việc với ngRepeat,filter và xử lý expections tốt hơn:

Điều khiển:

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

Lượt xem:

ng-click="vm.remove(item,$scope.bdays)"

thực hiện mà không có bộ điều khiển.

<!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("myShoppingList", []); 
</script>

<div ng-app="myShoppingList"  ng-init="products = ['Milk','Bread','Cheese']">
  <ul>
    <li ng-repeat="x in products track by $index">{{x}}
      <span ng-click="products.splice($index,1)">×</span>
    </li>
  </ul>
  <input ng-model="addItem">
  <button ng-click="products.push(addItem)">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

Phương thức splice () thêm / xóa các mục vào / từ một mảng.

array.splice(index, howmanyitem(s), item_1, ....., item_n)

chỉ số : Bắt buộc. Một số nguyên chỉ định tại vị trí cần thêm / xóa các mục, Sử dụng các giá trị âm để chỉ định vị trí từ cuối mảng.

howmanyitem (s) : Tùy chọn. Số lượng các mặt hàng sẽ được gỡ bỏ. Nếu được đặt thành 0, sẽ không có mục nào bị xóa.

item_1, ..., item_n : Tùy chọn. (Các) mục mới sẽ được thêm vào mảng

Tôi không đồng ý rằng bạn nên gọi một phương thức trên bộ điều khiển của bạn. Bạn nên sử dụng một dịch vụ cho bất kỳ chức năng thực tế nào và bạn nên xác định các chỉ thị cho bất kỳ chức năng nào về khả năng mở rộng và mô đun hóa, cũng như chỉ định một sự kiện nhấp có chứa một cuộc gọi đến dịch vụ mà bạn đưa vào chỉ thị của mình.

Vì vậy, ví dụ, trên HTML của bạn ...

<a class="btn" ng-remove-birthday="$index">Delete</a>

Sau đó, tạo một chỉ thị ...

angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
    return function(scope, element, attrs){
        angular.element(element.bind('click', function(){
            myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);  
        };       
    };
}])

Sau đó, trong dịch vụ của bạn ...

angular.module('myApp').factory('myService', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

Khi bạn viết mã đúng như thế này, bạn sẽ dễ dàng viết các thay đổi trong tương lai mà không phải cơ cấu lại mã của mình. Nó được tổ chức hợp lý và bạn đang xử lý các sự kiện nhấp tùy chỉnh một cách chính xác bằng cách ràng buộc bằng cách sử dụng các chỉ thị tùy chỉnh.

Chẳng hạn, nếu khách hàng của bạn nói, "này, bây giờ hãy làm cho nó gọi máy chủ và làm bánh mì, sau đó bật lên một phương thức." Bạn sẽ có thể dễ dàng chỉ cần truy cập vào dịch vụ mà không cần phải thêm hoặc thay đổi bất kỳ mã phương thức HTML và / hoặc mã điều khiển nào. Nếu bạn chỉ có một dòng trên bộ điều khiển, cuối cùng bạn sẽ cần sử dụng một dịch vụ, để mở rộng chức năng để nâng vật nặng hơn mà khách hàng yêu cầu.

Ngoài ra, nếu bạn cần một nút 'Xóa' khác ở nơi khác, giờ đây bạn có thuộc tính chỉ thị ('ng-remove-birthday'), bạn có thể dễ dàng gán cho bất kỳ yếu tố nào trên trang. Điều này bây giờ làm cho nó mô-đun và tái sử dụng. Điều này sẽ có ích khi xử lý mô hình các thành phần web HEAVY của Angular 2.0. Không có bộ điều khiển trong 2.0. :)

Chúc mừng phát triển !!!

Đây là một câu trả lời khác. Tôi mong nó sẽ có ích.

<a class="btn" ng-click="delete(item)">Delete</a>

$scope.delete(item){
 var index = this.list.indexOf(item);
                this.list.splice(index, 1);   
}

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

Nguồn đầy đủ có tại đây
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

nếu bạn có ID hoặc bất kỳ trường cụ thể nào trong mục của bạn, bạn có thể sử dụng bộ lọc (). hành động của nó như ở đâu ().

<a class="btn" ng-click="remove(item)">Delete</a>

trong bộ điều khiển:

$scope.remove = function(item) { 
  $scope.bdays = $scope.bdays.filter(function (element) {
                    return element.ID!=item.ID
                });
}

Pass the id that you want to remove from the array to the given function 

từ bộ điều khiển (Chức năng có thể nằm trong cùng một bộ điều khiển nhưng thích giữ nó trong một dịch vụ)

    function removeInfo(id) {
    let item = bdays.filter(function(item) {
      return bdays.id=== id;
    })[0];
    let index = bdays.indexOf(item);
    data.device.splice(indexOfTabDetails, 1);
  }