CODEWITHSUNDEEP
javascriptangularjsjhipsterangular-http
Rick GZ
Rick GZ

Reputation: 135

Using $http in angular jhipster entities

What is the proper way to update some entity field from Angular view/controller.

Let's imagine we have a"to-do" app in which we want to change "Task" entity status from 1 to 0 from a ng-click event and store that change in the database.

How can we create that functionality in our controller so we can call it when checking/unchecking a checkbox?

Lets set the playground:

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

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

</div>

In Controller we want to change "task.status" from 1 to 0 or viceversa when checkbox click:

    //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 () {




        };

Upvotes: 1

Views: 336

Answers (2)

Ga&#235;l Marziou
Ga&#235;l Marziou

Reputation: 16284

JHipster exposes a REST API so to update an existing task either you use PUT /api/tasks/123 with the full entity or you define a sub resource and you implement and use POST /api/tasks/123/complete which should return a 303 HTTP status code.

Do some research about PUT/POST and partial updates in REST.

Then in angular part, with first approach, generated task.service.js has everything you need with update function, second approach requires more work.

Upvotes: 1

Nick Bull
Nick Bull

Reputation: 9866

Surely this would simply be an event when the checkbox is clicked. Here's an example, straight from the docs. This is pretty straight forward stuff if I'm not missing something, potentially complete a good tutorial or two on Angular before you dive into building stuff!

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

Now modify that to your use case, as it functionally has all the requirements to make your code work.

Upvotes: 0

Related Questions