在 angular 个 jhipster 实体中使用 $http

Question

从 Angular view/controller.

更新某些实体字段的正确方法是什么

假设我们有一个"to-do" 应用程序，我们希望在其中通过 ng-click 事件将 "Task" 实体状态从 1 更改为 0，并将该更改存储在数据库中。

我们如何在我们的控制器中创建该功能，以便我们可以在 checking/unchecking 一个复选框时调用它？

让我们设置游乐场：

<div ng-repeat="task in tasklist.tasks">

    <checkbox ng-change="completeTask({{taskId:task.id}})"></checkbox>
    <span>{{task.title}}</span>  

</div>

在控制器中，我们希望在单击复选框时将 "task.status" 从 1 更改为 0，反之亦然：

    //If we need to obtain that task object from api
    var task = Task.get({id : $stateParams.taskId}).$promise;

    //Now how should the function work?

        $scope.completeTask = function () {




        };

Answer 1

当然，这只是单击复选框时的一个事件。这是直接来自 docs 的示例。如果我没有遗漏任何东西，这是非常简单的东西，可能会在 Angular 上完成一两个很好的教程，然后再开始构建东西！

HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>2. Change event on checkbox</h3>
    Select a checkbox<br />
    <label>Check1: <input type="checkbox" ng-model="check1Selected" ng-change="onCheckBoxChange()" /></label><br />
    <label>Check2: <input type="checkbox" ng-model="check2Selected" ng-change="onCheckBoxChange()" /></label><br />
    <strong>RESULT:</strong> {{onCheckBoxChangeResult}}<br />
    <br />
  </div>
</body>
</html>

JS:

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onCheckBoxChangeResult = "";

    $scope.onCheckBoxChange = function () {
      $scope.onCheckBoxChangeResult = "Check1 is " + ($scope.check1Selected ? "SELECTED" : "NOT SELECTED") +
        ", " + "Check2 is " + ($scope.check2Selected ? "SELECTED" : "NOT SELECTED");
    };
});

现在根据您的用例修改它，因为它在功能上具有使您的代码正常工作的所有要求。

Answer 2

JHipster 公开了一个 REST API，因此要更新现有任务，您可以将 PUT /api/tasks/123 与完整实体一起使用，或者定义一个子资源并实现并使用 POST /api/tasks/123/complete ，这应该return 一个 303 HTTP 状态代码。

研究一下 PUT/POST 和 REST 中的部分更新。

然后在 angular 部分，使用第一种方法，生成的 task.service.js 具有 update 函数所需的一切，第二种方法需要更多工作。

在 angular 个 jhipster 实体中使用 $http

Using $http in angular jhipster entities

javascript

angularjs

angular-http

jhipster