7

次のように定義された AngularJS $resource があります。

var Menus = $resource('http://cafe.com/api/menus');

そしてRESTful API。したがって、GETonを実行すると、次のMenusように返されます。

<cafe>
  <collection href="http://cafe.com/api/menus" type="menus">
    <template>
      <data name="Name" prompt="Menu name" />
    </template>
    <items>
      <item href="http://cafe.com/api/menus/1">
        <link href="http://cafe.com/api/menus/1/ingredients" rel="ingredients" />
        <data name="Name" prompt="Menu name">Morning</data>
      </item>
      <item href="http://cafe.com/api/menus/2">
        <link href="http://cafe.com/api/menus/2/ingredients" rel="ingredients" />
        <data name="Name" prompt="Menu name">Happy Hour</data>
      </item>
    </items>
  </collection>
</cafe>

質問は、メニュー 2 を削除するにはどうすればよいですか? (独自のハイパーメディア リンクがある場合: http://cafe.com/api/menus/2)

4

2 に答える 2

11

XML から Angular で管理された JavaScript オブジェクトの配列に移行したと仮定すると、これを使用してオブジェクトをレンダリングできます。

<tr ng-repeat="cafe in cafes">
    <td>{{cafe.name}}</td>
    <td>
        <button class="btn" ng-click="deleteCafe($index, cafe)">Delete</button>
    </td>
</tr>

コントローラーでこれを行うことができます：

function ListCtrl($scope, $http, CafeService) {
  CafeService.list(function (cafes) {
    $scope.cafes = cafes;
  });

  $scope.deleteCafe = function (index, cafe) {
    $http.delete(cafe.self).then(function () {
      $scope.cafes.splice(index, 1);
    }, function () {
      // handle error here
    });
  }
}

クライアント側で URL を作成する必要はありません。:)

更新: splice コマンドのバグを修正しましsplice(index, index)たsplice(index, 1)。

于 2012-11-22T22:44:39.180 に答える
2

REST サービスが JSON を angular に返し、JSON が返されたデータにメニュー ID を含む場合。

var Menu = $resource('http://cafe.com/api/menus/:id', { id: '@id' }); // replace @id with @<the id field in your json object>

// Delete menu 2
Menu.delete({id: 2}, function(){ // Success callback
  // Get all menus, 
  var menus = Menu.query(function() { // Success callback
    // alternative delete syntax:
    var lastMenu = menus.pop();
    lastMenu.$delete();
  });
});
于 2012-11-19T08:33:26.927 に答える