AngularJS 범위의 배열에서 항목을 제거하는 방법은 무엇입니까?

간단한 할 일 목록이지만 각 항목의 목록 페이지에 삭제 버튼이 있습니다.

관련 템플릿 HTML :

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

관련 컨트롤러 방법 :

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

나는 시도 $scope.persons.pull(person)하고 $scope.persons.remove(person).

데이터베이스가 성공적으로 삭제되었지만 범위 에서이 항목을 가져올 수 없으며 클라이언트가 이미 가지고있는 데이터에 대해 서버에 메소드 호출을하고 싶지 않습니다.이 사람을 범위에서 제거하고 싶습니다.

어떤 아이디어?

문제는 실제로 Angular가 아니라 Array 메서드와 관련이 있습니다. 배열에서 특정 항목을 제거하는 올바른 방법은입니다 Array.splice. 또한 ng-repeat를 사용 $index하면 전달한 배열의 현재 색인 인 특수 속성에 액세스 할 수 있습니다 .

해결책은 실제로 매우 간단합니다.

전망:

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

제어 장치:

$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);
  });
};

배열 person에서 의 색인을 찾은 persons다음 배열의 splice메소드 를 사용해야합니다 .

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

유용한 기능 목록이있는 Underscore.js 라이브러리를 사용합니다 .

without

without_.without(array, *values)

값의 모든 인스턴스가 제거 된 배열의 복사본을 반환합니다.

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

예

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
}));

JSFiddle의 데모를 참조하십시오 .

filter

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

// => [2, 4, 6]

예

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

바이올린 데모를 참조하십시오 .

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

이것은 나를 위해 작동합니다!

list와 연관된 함수가있는 경우, 스플 라이스 함수를 작성할 때 연관도 삭제됩니다. 내 해결책 :

$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) ] });
    });
};

목록 매개 변수의 이름은 items 입니다. x.done 매개 변수 는 항목이 삭제되는지 여부를 나타냅니다.

다른 참조 : 다른 예

희망이 당신을 도와줍니다. 인사말.

indexOf가 -1을 반환하기 때문에 @Joseph Silber의 승인 된 답변이 작동하지 않습니다. 아마도 Angular가 $ scope.items [0]와 내 항목마다 다른 해시 키를 추가하기 때문일 수 있습니다. angular.toJson () 함수 로이 문제를 해결하려고 시도했지만 작동하지 않았습니다.

아, 이유를 알았습니다 ... 청크 방법을 사용하여 $ scope.items를 보면서 테이블에 두 개의 열을 만듭니다. 죄송합니다!

이것을 사용할 수도 있습니다

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

Angular에는이라는 내장 함수 arrayRemove가 있습니다.이 경우 메소드는 다음과 같습니다.

arrayRemove($scope.persons, person)

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

범위에서 요소를 제거하려면 다음을 사용하십시오.

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

여기 에서 링크 설명을 입력하십시오