How can I transfer a value from one form to another using AngularJS?

Question

How can I transfer a value from one form to another using AngularJS?

Trying to retrieve the Id from a table and pass it to a controller, however, I am facing an issue where the Id value is lost every time the form changes. Is there a better way to handle this? Below is the service and controller code:

//Retrieving IdValue

app.controller('SeguimientoSolicitudesController', ['$scope', 'ParametrosSolicitudes', function ($scope, ParametrosSolicitudes) {
        this.SegSolic = "";        
        var self = this;

        $scope.ValorId = function (value) {
            ParametrosSolicitudes.setVarIdSolicitud(value);
            window.location.href = urlServer + "Home/About";
        };


        solicitudContext.obtenerListaSegSolicitudes(function (resp) {
            switch (resp.ressult) {
                case "tgp":
                    self.SegSolic = solicitudContext.ListaSeguimientoSolicitudes;
                    break;
                case "notgp":
                    break;
                default:
                    break;
            }
            $scope.$apply();
        });       
    }]);

//Getting detail of the selected id but value is missing
app.controller('SolicitudesController', ['$scope', 'ParametrosSolicitudes', 'parameterConstant', function ($scope, ParametrosSolicitudes, parameterConstant) {
        this.SolicitudDetalle = "";
        var IdSolicitud = '';
        var self = this;

        $scope.$watch(function () { return ParametrosSolicitudes.getVarIdSolicitud() }, function () {
            IdSolicitud = ParametrosService.getVarIdSolicitud();
        });
        solicitudContext.obtenerListaSolicitudes('R', IdSolicitud, function (resp) {
            switch (resp.ressult) {
                case "tgp":
                    self.SolicitudDetalle = solicitudContext.ListaSolicitudes;
                    break;
                case "notgp":
                    break;
                default:
                    break;
            }
            $scope.$apply();
        });
    }]);

javascript angularjs angular-services angular-controller

Answer 1

Answer №1

Rafa, it seems like you have encountered a conceptual issue. When you reload the page in JavaScript, any variables stored will be lost. This means that when you use:

window.location.href = urlServer + "Home/About"

You end up losing all data on the client side.

Instead of using the method above, for navigating from one page to another in AngularJS, it is recommended to utilize the $location service. In your case, you can achieve this by using something like: $location.path("Home/About");

https://docs.angularjs.org/api/ng/service/$location

Please refer to this sample code below:

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
controller: "SeguimientoSolicitudesController",
templateUrl: "SeguimientoSolicitudes.html"
})
    .when('/details/:id/', {
controller: 'SolicitudesController', 
templateUrl: "Solicitudes.html"
})
}]);

app.service("shareService", function(){
// Note that this value will be lost upon reloading the page. If you need it to persist, consider saving it to the server or browser (cookies, localStorage).
var name = null;

return {
getName: function(){
return name;
},
setName: function(val){
name = val;
}
}
})

app.controller('SeguimientoSolicitudesController', ['$scope', '$location','shareService',function ($scope, $location, shareService) {       
$scope.list = [{id: 5, name: "NameA"}, {id: 9, name: "NameB"}];

$scope.goToDetails = function(item){
shareService.setName(item.name);
$location.path("details/" + item.id);
}
}]);    
    
app.controller('SolicitudesController', ['$scope','$routeParams','shareService',function ($scope, $routeParams, shareService) {                    
$scope.id = $routeParams.id;
$scope.name = shareService.getName();
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"  ng-app="app">
<ng-view></ng-view>

  <script type="text/ng-template" id="SeguimientoSolicitudes.html">
    <p ng-repeat="item in list">
      <a class="btn btn-link" ng-click="goToDetails(item)" style="cursor: pointer;">{{item.name}}</a>
    </p>
  </script>

  <script type="text/ng-template" id="Solicitudes.html">
     <p>ID: {{id}}, NAME: {{name}}</p>
      <a class="btn btn-link" href="#/">back</a>
  </script>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js"></script>

I hope this information proves to be helpful to you.

Answer 2

Rafa, it seems like you have encountered a conceptual issue. When you reload the page in JavaScript, any variables stored will be lost. This means that when you use:

window.location.href = urlServer + "Home/About"

You end up losing all data on the client side.

Instead of using the method above, for navigating from one page to another in AngularJS, it is recommended to utilize the $location service. In your case, you can achieve this by using something like: $location.path("Home/About");

https://docs.angularjs.org/api/ng/service/$location

Please refer to this sample code below:

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
controller: "SeguimientoSolicitudesController",
templateUrl: "SeguimientoSolicitudes.html"
})
    .when('/details/:id/', {
controller: 'SolicitudesController', 
templateUrl: "Solicitudes.html"
})
}]);

app.service("shareService", function(){
// Note that this value will be lost upon reloading the page. If you need it to persist, consider saving it to the server or browser (cookies, localStorage).
var name = null;

return {
getName: function(){
return name;
},
setName: function(val){
name = val;
}
}
})

app.controller('SeguimientoSolicitudesController', ['$scope', '$location','shareService',function ($scope, $location, shareService) {       
$scope.list = [{id: 5, name: "NameA"}, {id: 9, name: "NameB"}];

$scope.goToDetails = function(item){
shareService.setName(item.name);
$location.path("details/" + item.id);
}
}]);    
    
app.controller('SolicitudesController', ['$scope','$routeParams','shareService',function ($scope, $routeParams, shareService) {                    
$scope.id = $routeParams.id;
$scope.name = shareService.getName();
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"  ng-app="app">
<ng-view></ng-view>

  <script type="text/ng-template" id="SeguimientoSolicitudes.html">
    <p ng-repeat="item in list">
      <a class="btn btn-link" ng-click="goToDetails(item)" style="cursor: pointer;">{{item.name}}</a>
    </p>
  </script>

  <script type="text/ng-template" id="Solicitudes.html">
     <p>ID: {{id}}, NAME: {{name}}</p>
      <a class="btn btn-link" href="#/">back</a>
  </script>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js"></script>

I hope this information proves to be helpful to you.

How can I transfer a value from one form to another using AngularJS?

Answer №1

Similar questions

Every div must have at least one checkbox checked

What is the best way to access the attribute of an AJAX response?

Error handling: Encountered unexpected issues while parsing templates in Angular 2

Using Angular Ionic for a click event that is triggered by a specific class

Update the CSS dynamically using JavaScript or AngularJS

Can GET or POST variables be transmitted to external JavaScript?

Tips for integrating the C++ icon into a ReactJs project

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

Issue with ng-repeat causing HTML table data to not appear

Connecting a JavaScript script from my HTML file to Django's static files - here's how

Authentication Error (401) in WordPress JWT

Node.js: Promise chain abruptly stops after reaching a predefined limit without causing any errors

Enhance your ng-boilerplate by incorporating angular ui bootstrap 3

Encountering an Error while Setting Up NextJS on Vercel

Steps to dynamically display a new view template when a button is clicked using ng-view

Using JavaScript, display JSON data retrieved from a PHP file

Mastering SVG Path Coordinates using Pure JavaScript

Ways to obtain the chosen option from a drop-down menu using jQuery

Activate hover effect on toggle button

When HTML elements are dynamically inserted through JavaScript using quilljs, they may cause conflicts with the layout properties