7

AngularJS アプリで Restangular を使用しています。各アイテムの削除リンクを含むテーブルがあります。アイテムを削除して、行を自動的に削除したいと考えています。しかし、それはDBからのみ削除されます。DOM が自動的に更新されるようにリファクタリングするにはどうすればよいですか?

// The controller
angular.module('myApp').controller('ManageCtrl', function($scope, Restangular) {

  $scope.delete = function(e) {
     Restangular.one('product', e).remove();
  };

  Restangular.all('products').getList({}).then(function(data) {
    $scope.products = data.products;
    $scope.noOfPages = data.pages;
  });
});


 // The view
 <li ng-repeat="product in products">
   <a href="#" ng-click="delete(sheet._id)"></a>
  </li>

Angular リソースを使用した場合でも、この例を見つけたいと思います。すべての管理/データ テーブルのデモは、静的データから動作するようです。

4

2 に答える 2

19

Restangular https://github.com/mgonto/restangular#restangular-methodsによると、元のアイテムを使用してアクションを実行する必要があると言及されているため、html コードでは次のようにする必要があります。

 <li ng-repeat="product in products">
   <a href="#" ng-click="delete(product)"></a>
</li>

次に、コントローラーで：

 $scope.delete = function( product) {
    product.remove().then(function() {
      // edited: a better solution, suggested by Restangular themselves
      // since previously _.without() could leave you with an empty non-restangular array
      // see https://github.com/mgonto/restangular#removing-an-element-from-a-collection-keeping-the-collection-restangularized

      var index = $scope.products.indexOf(product);
      if (index > -1) $scope.products.splice(index, 1);
   });
 };

配列から要素を削除することなく、underscore.jsを使用していることに注意してください。.remove()その例をreadmeページに投稿すると、関数がコレクションから元のアイテムを削除しないことを意味すると思います。コレクション自体から削除したいすべてのアイテムを削除するわけではないため、これは理にかなっています。

DELETE $HTTPまた、リクエストが失敗した場合はどうなりますか? その場合、アイテムを削除したくないので、コードでその問題を確実に処理する必要があります。

于 2013-08-30T11:11:19.400 に答える
2

私の場合、上記はうまくいきませんでした。私は次のことをしなければなりませんでした：

$scope.changes = Restangular.all('changes').getList().$object;

    $scope.destroy = function(change) {
        Restangular.one("changes", change._id).remove().then(function() {
            var index = $scope.changes.indexOf(change);
            if (index > -1) $scope.changes.splice(index, 1);
        });
    };
于 2015-03-18T17:51:22.043 に答える