How to get id to edit data with Angular?

Question

I need to get the account id that is displayed in the html below. And I need to take this id to my backend and bring the dice and edit, but I’m not getting it.

Follows my codes:

<div class="col-md-6 tabelaEntradas" ng-controller="EditarContaCtrl">
        <table width="400">
            <tr>
                <th>Subcategoria</th>
                <th>Conta</th>
                <th>Editar</th>
            </tr>
            <tr ng-repeat="contaE in contasEntrada">
                <td>{{contaE.subcategoria}}</td>
                <td>{{contaE.conta}}</td>
                <td><a href="#/editarConta/{{contaE.idconta}}">editar</a></td>
            </tr>
        </table>
    </div>

my controller:

app.controller("EditarContaCtrl", function ($scope, $http, $window, $routeParams) {

var idempresa = $window.localStorage.getItem('idemp');
var empresa = $window.localStorage.getItem('empresa');
var usuario = $window.localStorage.getItem('usuario');
var idusuario = $window.localStorage.getItem('idusuario');

$scope.empresa = empresa;
$scope.usuario = usuario;

var pegarContaEntrada = function(contaE){
    console.log(contaE);
}

pegarContaEntrada();

});

Answer 1

Make a button that calls an onClick function. And within this function send updated data. Example:

<button ng-click="enviaConta(contaE.conta)">
Envia conta
</button>

And then on your controller define a function with the sent nameConta.

var enviaConta= function(conta){
   $http.post('/myServerUrl', conta, options).then(successCallback, errorCallback);
};

Answer 2

to do what you want: "Click the link redirect to another url and take the parameter passed in the url" you will need to inject the ui-router or ng-router in your application, the example below was mounted using ui-router.

Don’t forget to take the value of the parameter inside the controller using $stateParams as I added it to the controller

//O Exemplo que eu passei utiliza o ui-router, geralmente nos projetos angular é usado o ui-router ou ng-router mas a principio os fundamentos são os mesmos

(function () {
    //Adicionando o modulo ui-router na sua aplicação Angular
    'use strict';
    angular.module('app', [
        'ui.router'

    ]);

})();


(function () {
    'use strict';
    angular.module('app')

        .config(configRouter);
    /** @ngInject */
    function configRouter($stateProvider, $urlRouterProvider) {

        $stateProvider

            .state('home', {
                url: "/",
                templateUrl: 'home/home.html',
                controller: 'HomeController',
                controllerAs: 'home',
            })

            /*Na url você coloca os parametros de acordo com a documentação.
             Nesse caso eu forcei o parametro aceitar somente inteiro,
             caso o parametro seja opicional utilizar "?" ex: url: "/editarConta?id",
             */
            .state('editarConta', {
                url: "/editarConta/{id:int}",
                templateUrl: 'editarConta/editarConta.html',
                controller: 'EditarContaCtrl',
                controllerAs: 'conta',
            });


        $urlRouterProvider.otherwise('/');
        $urlRouterProvider.when('', '/home');

    }

})();


(function () {
    'use strict';

    angular
        .module('app')
        .controller('EditarContaCtrl', EditarContaCtrl);

    /** @ngInject */
    function EditarContaCtrl($stateParams) {
    //Os valores dos parametros ficam no $stateParams
    console.log($stateParams.id);

    }
})();

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


<div class="col-md-6 tabelaEntradas" ng-controller="EditarContaCtrl">
        <table width="400">
            <tr>
                <th>Subcategoria</th>
                <th>Conta</th>
                <th>Editar</th>
            </tr>
            <tr ng-repeat="contaE in contasEntrada">
                <td>{{contaE.subcategoria}}</td>
                <td>{{contaE.conta}}</td>
                <td><a ui-sref="editarConta({id: contaE.id})">editar</a></td>
            </tr>
        </table>
    </div>