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

यह मानते हुए कि आप XML से जावास्क्रिप्ट वस्तुओं का एक कोणीय से प्रबंधित सरणी के लिए चले गए हैं, तो आप अपने वस्तुओं रेंडर करने के लिए इस का उपयोग कर सकते हैं:

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

देखो, यूआरएल के क्लाइंट-साइड निर्माण नहीं! :)

अद्यतन:, जोड़ आदेश में एक बग तय splice(index, index) था, लेकिन splice(index, 1) होना चाहिए।

Answer 2

यदि आपकी आरईएसटी सेवा जेएसओएन को कोणीय में लौटाती है और JSON में लौटाए गए डेटा में मेनू आईडी शामिल होती है।

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