Làm cách nào để xóa một mục khỏi một mảng trong phạm vi AngularJS?

Danh sách việc cần làm đơn giản, nhưng có nút xóa trên trang danh sách cho từng mục:

HTML mẫu có liên quan:

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

Phương pháp điều khiển có liên quan:

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

Tôi đã thử $scope.persons.pull(person)và $scope.persons.remove(person).

Mặc dù cơ sở dữ liệu đã xóa thành công, tôi không thể kéo mục này khỏi phạm vi và tôi không muốn thực hiện cuộc gọi phương thức đến máy chủ để lấy dữ liệu mà khách hàng đã có, tôi chỉ muốn xóa người này khỏi phạm vi.

Có ý kiến ​​gì không?

Vấn đề của bạn không thực sự xảy ra với Angular, mà là với các phương thức Array. Cách thích hợp để loại bỏ một mục đặc biệt khỏi một mảng là với Array.splice. Ngoài ra, khi sử dụng ng-repeat, bạn có quyền truy cập đặc biệt$index , là chỉ mục hiện tại của mảng bạn đã truyền vào.

Giải pháp thực sự khá đơn giản:

Lượt xem:

<a ng-click="delete($index)">Delete</a>

Điều khiển:

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};

Bạn sẽ phải tìm chỉ mục của mảng persontrong personsmảng của mình , sau đó sử dụng splicephương thức của mảng :

$scope.persons.splice( $scope.persons.indexOf(person), 1 );

Tôi sẽ sử dụng thư viện Underscore.js có danh sách các hàm hữu ích.

without

without_.without(array, *values)

Trả về một bản sao của mảng với tất cả các phiên bản của các giá trị bị xóa.

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
// => [2, 3, 4]

Thí dụ

var res = "deleteMe";

$scope.nodes = [
  {
    name: "Node-1-1"
  },
  {
    name: "Node-1-2"
  },
  {
    name: "deleteMe"
  }
];
    
$scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {
  name: res
}));

Xem bản trình diễn trong JSFiddle .

filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

Thí dụ

$scope.newNodes = _.filter($scope.nodes, function(node) {
  return !(node.name == res);
});

Xem bản demo trong Fiddle .

$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

cái này hiệu quả với tôi

Nếu bạn có bất kỳ chức năng nào liên quan đến danh sách, khi bạn thực hiện chức năng ghép nối, liên kết cũng bị xóa. Giải pháp của tôi:

$scope.remove = function() {
    var oldList = $scope.items;
    $scope.items = [];

    angular.forEach(oldList, function(x) {
        if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] });
    });
};

Danh sách param được đặt tên các mục . Các param x.done cho biết nếu mục sẽ bị xóa.

Một tài liệu tham khảo khác: Một ví dụ khác

Hy vọng giúp bạn. Lời chào hỏi.

Đối với câu trả lời được chấp nhận của @Joseph Silber không hoạt động, vì indexOf trả về -1. Điều này có thể là do Angular thêm một hashkey, khác với $ scope.items [0] và mục của tôi. Tôi đã cố gắng giải quyết vấn đề này bằng hàm angular.toJson (), nhưng nó không hoạt động :(

À, tôi đã tìm ra lý do ... Tôi sử dụng phương pháp chunk để tạo hai cột trong bảng bằng cách xem $ scope.items của tôi. Lấy làm tiếc!

Bạn cũng có thể sử dụng cái này

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });

Angular có một hàm dựng sẵn được gọi arrayRemove, trong trường hợp của bạn, phương thức có thể chỉ đơn giản là:

arrayRemove($scope.persons, person)

array.splice(array.pop(item));

Để xóa phần tử khỏi phạm vi sử dụng:

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

Từ nhập mô tả liên kết ở đây