วิธีการลบรายการออกจากอาร์เรย์ในขอบเขต 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;
};

มันใช้งานได้สำหรับฉัน!

หากคุณมีฟังก์ชั่นใด ๆ ที่เกี่ยวข้องกับรายการเมื่อคุณสร้างฟังก์ชั่นรอยต่อความสัมพันธ์จะถูกลบด้วย ทางออกของฉัน:

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

พระรามรายการเป็นชื่อรายการ พารามิเตอร์x.doneระบุว่ารายการนั้นจะถูกลบหรือไม่

การอ้างอิงอื่น: อีกตัวอย่างหนึ่ง

หวังว่าจะช่วยคุณ ทักทาย.

สำหรับคำตอบที่ยอมรับของ @Joseph Silber ไม่ทำงานเนื่องจาก indexOf ส่งคืน -1 อาจเป็นเพราะ 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);
    };

จากป้อนคำอธิบายลิงก์ที่นี่