AngularJS $資源とハイパーメディア

Question

は、私はこのように定義されたAngularJSの$リソースを持っています。私はMenusにGETを行うときに、私はこれを取り戻す：

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

Answer 1

あなたはJavaScriptオブジェクトの角度が管理する配列にXMLから行っていると仮定すると、あなたのオブジェクトをレンダリングするためにこれを使用することができます。

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)である必要があります。

Answer 2

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

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

をし、あなたのコントローラであなたがこれを行うことができます：

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