does not show the value of the value in console.log

Question

does not show the value of the value in console.log

Navigation

#1 by (2 votes)

1

I'm trying to get the value of a group of option , which works perfectly in the browser, here the example in Plunker , but when compiling the same code to test it on a mobile device, the value still appears in the view, but it does not appear in the console.log(); , it tells me that the value is undefined

groups.html

<div class="list">

        <label class="item item-input item-select">

            <div class="input-label">
                Grupos
            </div>              

            <select ng-change="datos.seleccionar()" 
                    ng-options="grupo.Codigo as grupo.Nombre for grupo in datos.menuGrupos track by grupo.Codigo" 
                    ng-model="seleccionado">
                 <option value="">Seleccione un grupo</option>
            </select>   

        </label>

        <h3 class="item">{{seleccionado}}</h3>

    </div>

groups.js

mostrarGruposProf.$inject = ['$scope'];

function mostrarGruposProf($scope) {

    var getGrupos, infoGrupos;

    getGrupos = localStorage.getItem('GruposProf');
    infoGrupos = JSON.parse(getGrupos);

    $scope.datos = {
        menuGrupos: infoGrupos,
        seleccionar: function() {
            console.log($scope.seleccionado);
        }
    };
}

angularjs

asked by Pedro Miguel Pimienta Morales 31.05.2016 в 20:59

source

1 answer

Bootstrap slider (carousel) in wordpress ON DELETE CASCADE with Trigger AFTER DELETE

score 2 · Answer 1

I have not been able to reproduce exactly the problem you have but I think the error that may be happening to you is that you are using track by in conjunction with select as which is usually not a good idea because it is very prone to generate errors. Citing the angular doc

Be careful when you use select as and track by in the same expression.

This does not mean that it can not be used, but you must be very careful with this combination.

Looking at your expression

grupo.Codigo as grupo.Nombre for grupo in datos.menuGrupos track by grupo.Codigo

This will use grupo.Codigo as the value associated with ng-model but in turn track by will try to use the object as such grupo to keep track of which one is selected. This is what does not select the element as such in the first case of the example that I put below.

To fix it simply change it to

// Sin track by (recomendado)
grupo.Codigo as grupo.Nombre for grupo in datos.menuGrupos

or

// Sin especificar una propiedad en el select as
grupo as grupo.Nombre for grupo in datos.menuGrupos track by grupo.Codigo

This is a demo of your original problem, a sample of why the select does not work and the two solutions so you can compare them

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

mostrarGruposProf.$inject = ['$scope'];

app.controller('MainCtrl', mostrarGruposProf);

function mostrarGruposProf($scope) {

  var getGrupos, infoGrupos;

  //getGrupos = localStorage.getItem('GruposProf');
  //infoGrupos = JSON.parse(getGrupos);
  infoGrupos = [{
    Codigo: 1,
    Nombre: 'Grupo1'
  }, {
    Codigo: 2,
    Nombre: 'Grupo2'
  }, {
    Codigo: 3,
    Nombre: 'Grupo3'
  }, {
    Codigo: 4,
    Nombre: 'Grupo4'
  }];

  $scope.datos = {
    menuGrupos: infoGrupos,
    seleccionar: function() {
      console.log($scope.seleccionado);
    }
  };

  $scope.datos1 = {
    menuGrupos: infoGrupos,
    seleccionar: function() {
      console.log($scope.seleccionado1);
    }
  };

  $scope.datos2 = {
    menuGrupos: infoGrupos,
    seleccionar: function() {
      console.log($scope.seleccionado2);
    }
  };

  $scope.datos3 = {
    menuGrupos: infoGrupos,
    seleccionar: function() {
      console.log($scope.seleccionado3);
    }
  };

  $scope.seleccionado3 = infoGrupos[2];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <div>
    Versión con problemas
    <select ng-change="datos.seleccionar()" ng-options="grupo.Codigo as grupo.Nombre for grupo in datos.menuGrupos track by grupo.Codigo" ng-model="seleccionado">
      <option value="">Seleccione un grupo</option>
    </select>
    {{seleccionado}}
  </div>
  <hr>
  <div>
    Solución 1
    <select ng-change="datos1.seleccionar()" ng-options="grupo.Codigo as grupo.Nombre for grupo in datos1.menuGrupos" ng-model="seleccionado1">
      <option value="">Seleccione un grupo</option>
    </select>
    {{seleccionado1}}
  </div>
  <hr>
  <div>
    Solución 2
    <select ng-change="datos2.seleccionar()" ng-options="grupo as grupo.Nombre for grupo in datos2.menuGrupos track by grupo.Codigo" ng-model="seleccionado2">
      <option value="">Seleccione un grupo</option>
    </select>
    {{seleccionado2}}
  </div>
  <hr>
  <div>
    Síntoma de porque no funciona
    <select ng-change="datos3.seleccionar()" ng-options="grupo.Codigo as grupo.Nombre for grupo in datos3.menuGrupos track by grupo.Codigo" ng-model="seleccionado3">
      <option value="">Seleccione un grupo</option>
    </select>
    {{seleccionado3}}
  </div>

</div>