Undefined when passing parameter to a JS and Angular function

Question

Undefined when passing parameter to a JS and Angular function

Navigation

#1 by (2 votes)

0

I have a function that takes as a parameter a value from HTML, however, it is coming undefined . I'm using JS and Angular.

My HTML

<div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left">
   <select onchange="carregarDistritos()" id="idSelecionaSize" class="form-control" data-pager-action='pagesize'>
      <option value="5">Ver 5</option>
      <option value="15">Ver 15</option>
      <option value="20">Ver 20</option>
      <option value="25">Ver 25</option>
      <option value="50">Ver 50</option>
      <option value="100">Ver 100</option>
   </select>
</div>

My JS

app.controller("buscaDistritoController", function($scope,  $http, $location) {



    $scope.distritos = [];
    $scope.distrito = {}; // binding com o form

    $(document).ready(function() {
          var e = document.getElementById("idSelecionaSize");
            var size = e.options[e.selectedIndex].value;
    });



    carregarDistritos = function() {

        token = localStorage.getItem("userToken");

        var search = $location.search();
        var page = search.page||0;
        var size = search.size||size;
        var sort = search.sort||'type,desc';


        $http({
             method: 'GET',
             url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
        }).then(function(response) {
            $scope.distritos = response.data.content;
            $scope.page = response.data.totalPages;
            $scope.sort = sort;

        }, function(response) {
            console.log(response.data);
            console.log(response.status);
        });

    };
});

javascript angularjs select

asked by anonymous 06.12.2017 / 00:12

1 answer

Magic Cast - Convert String to various object types Laravel: Syntax error or access violation: 1071 Specified key was too long

score 2 · Accepted Answer

The problem is that you are using the angle, but this is recovering the value using JQuery. When $ (document) .ready is triggered, the value of "size" is actually undefined.

My suggestion is to use the ng -model property of angular, which is the appropriate way to retrieve values of the input from HTML, and call its method in ng-change.

HTML example:

<div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left">
<select ng-change="carregarDistritos()" ng-model="size" class="form-control" data-pager-action='pagesize'>
      <option value="5">Ver 5</option>
      <option value="15">Ver 15</option>
      <option value="20">Ver 20</option>
      <option value="25">Ver 25</option>
      <option value="50">Ver 50</option>
      <option value="100">Ver 100</option>    </select> </div>

EXAMPLE Controller:

carregarDistritos = function() {

        token = localStorage.getItem("userToken");

        var search = $location.search();
        var page = search.page||0;
        var size = search.size||$scope.size;
        var sort = search.sort||'type,desc';


        //restante do seu código//

    };

You can check out here