javascript – AngularJS $资源和超媒体

我有一个像这样定义的AngularJS $资源:
var Menus = $resource('http://cafe.com/api/menus');

一个RESTful API.所以,当我在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)

解决方法

假设您已经从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!

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...