Creating a controller in Angularjs

Asked

Viewed 910 times

-2

I’m riding a controller where one of the features is to take a data in the bank through your id. However, nothing appears in the console when I put this

Code that displays countries on the screen

<table width="200">
    <tr>
        <td><b>País</b></td>
        <td><b>Sala</b></td>
    </tr>
    <tr ng-repeat="pais in paises">
        <td>{{pais.nome}}</td>
        <td>{{pais.sala}}</td>
        <td><a href="#/editarPais/{{pais.idPais}}">editar</a></td>
    </tr>
</table>

Html code

<form>
    <input type="hidden" ng-model="pais.idPais">
    País <input type="text" ng-model="pais.nome">
    Sala <input type="text" ng-model="pais.sala">
    <button ng-click="atualizarPais(pais)">Atualizar</button><br>
</form>

Acute code

app.controller("PaisesController", function ($scope, $http, $routeParams, $state) {

var carregaPaises = function () {
    $http.get("admin/php/pegaPaises.php").success(function (data){
        //console.log(data);
        $scope.paises = data;
    });
};

$scope.adicionaPais = function (pais) {
    $http.post("admin/php/adicionaPais.php", pais).then(function (data){
        //console.log(data);
        carregaPaises();
    })
};

var carregaPais = function (pais) {
    console.log($routeParams.pais);
};

carregaPaises();

carregaPais();

});

Config code:

var app = angular.module("vc", ["ui.router", "ngRoute"]);
.state("paises", {
        url: "/paises",
        controller: "PaisesController",
        templateUrl: "admin/views/paises.html"
    })

    .state("editarPais", {
        url: "/editarPais/:idPais",
        controller: "editarPaisController",
        templateUrl: "admin/views/editarPais.html"
    })

How do I see the data that comes in the parameter?

angularjs

  • Exactly Celso. Because I’ve used this in another code and it worked.

  • It’s a bit confusing.. Where should this parameter come from? the URL or the form? Based on your previous questions, you’re using ui-router right? And you just need to get the URL parameter, right?

  • Yes, it should come from the form and I’m using ui-router. I don’t know how it works at the angle, if the parameters come via url.

  • If it comes from the form, then it has nothing to do with the URL parameter, is that it? You just need to get the ID that is in the Hidden input form?

  • Exactly Celso. And disregard that ng-click "updatePais(parents)" button as it is not being used now. Now I want to load the data in the form for editing.

  • So for now it is impossible to do this, because the data does not yet exist in the form, so we have no way to get the ID. Either you pass this variable through a global var, or coockie, or same url parameter.

  • Celso, I had forgotten to put the screen codes that display the countries and their respective edit buttons with their ids. Take a look at the post statement. Sorry.

Show 2 more comments

1 answer

1

Your problem may be due to an injection failure of the parameter. Try using $routeParams in the injection of controller, thus:

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

But I don’t know how you are doing setting the parameter in the url, because this is not the method Angular set a parameter. As you said you are using the ui-router, recommend that you do it in the correct way, including the access link, where it should be done in the following way:

html

<td><a ui-sref="meuestado({idPais: pais.idPais})">editar</a></td>

controller

app.controller("editarPaisController", function ($scope, $http, $state) {
    var urlParam = $state.params.idPais;
});

State

.state('meuestado', {
    url: 'editarPais/:idPais',
    //..outras opções aqui
})

  • This appeared on the console: "Error: Could not resolve 'mystate' from state 'countries'"

  • but then you have to use the state referring to that editing page, I set just one example. You should make the adaptation to your scenario.

  • To not leave everything spread... I already have a controller that saves the countries in the bank and displays on the screen. I can take and join the commands of "editarPaisController" and place next to each other, no?

  • 1

    That’s 100% up to you. I’ve seen articles by people who use well-targeted controllers, while others group all the functions of a particular area into one. Do as you see fit. For example, country functions in the controller paisesCtrl, will work the same way as segmenting.

  • Look at the hoarding code... I put in the post. I had already done that you suggested.

  • Yes, perfect. Just change the way you access this page, see my reply in the html part, just change 'mystate' to 'editarPais', which is yours state editing.

  • I changed my controller, put everything in one controller, see in the description of the post I updated.

  • Okay, but you’re still using the ngRoute. I recommend that you use or the ngRoute or the ui-router. For ui, my answer will work, just you adapt the function of loading the parameter in the controller. To the ngRoute, you should just check how to set the parameter. But from there you can already mount, because now just adapt your flow.

  • Let’s go continue this discussion in chat.

  • Celso, I’m lost... How do I work with this?

  • Celso, I switched to: "app.controller("Paisescontroller", Function ($Scope, $http, $stateParams) {" , and it worked.

  • 1

    Yes, it’s another method that’s also right. I use $state.params because I do other functions from it. But if it worked, perfect.

Show 7 more comments

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.