javascript – AngularJS $资源和超媒体

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS $资源和超媒体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个像这样定义的AngularJS $资源:
  1. var Menus = $resource('http://cafe.com/api/menus');

和一个RESTful API.所以,当我在Menus上做GET时,我得到了回复

  1. <cafe>
  2. <collection href="http://cafe.com/api/menus" type="menus">
  3. <template>
  4. <data name="Name" prompt="Menu name" />
  5. </template>
  6. <items>
  7. <item href="http://cafe.com/api/menus/1">
  8. <link href="http://cafe.com/api/menus/1/ingredients" rel="ingredients" />
  9. <data name="Name" prompt="Menu name">Morning</data>
  10. </item>
  11. <item href="http://cafe.com/api/menus/2">
  12. <link href="http://cafe.com/api/menus/2/ingredients" rel="ingredients" />
  13. <data name="Name" prompt="Menu name">Happy Hour</data>
  14. </item>
  15. </items>
  16. </collection>
  17. </cafe>

问题是,如何删除菜单2? (鉴于它有自己的超媒体链接:http://cafe.com/api/menus/2)

解决方法

假设您已经从XML转换为Angular托管的JavaScript对象数组,您可以使用它来呈现您的对象:
  1. <tr ng-repeat="cafe in cafes">
  2. <td>{{cafe.name}}</td>
  3. <td>
  4. <button class="btn" ng-click="deleteCafe($index,cafe)">Delete</button>
  5. </td>
  6. </tr>

在你的控制器中你可以这样做:

  1. function ListCtrl($scope,$http,CafeService) {
  2. CafeService.list(function (cafes) {
  3. $scope.cafes = cafes;
  4. });
  5.  
  6. $scope.deleteCafe = function (index,cafe) {
  7. $http.delete(cafe.self).then(function () {
  8. $scope.cafes.splice(index,1);
  9. },function () {
  10. // handle error here
  11. });
  12. }
  13. }

看,没有客户端创建的URL!

猜你在找的JavaScript相关文章