Obtener un valor en lugar de un objeto en un SELECT en Angularjs

publicado por: Anonymous

Tengo el siguiente código que me muestra una serie de horas desde las 07 hasta las 22. Lo que quiero saber es como obtener el valor de la hora seleccionada en mi controller y si es posible imprimir en un alert.

Vista html

<div ng-controller="MyCtrl">
  <div class="item item-divider item-positive item-text-wrap">
          HORA INGRESO
        </div>
        <div class="row">
          <div class="col .col-50">
            <div class="item item-input item-select">
              <div class="input-label">HH</div>
              <select ng-model="data.hih" ng-init="data.hih=horas[0]" ng-options="hih.hora for hih in horas">
              </select>
            </div>          
          </div>
        </div>
        <a class="button button-block icon-left ion-ios-compose button-balanced" 

          ng-click="crearTutoria()">
          Crear Tutoría
        </a>
</div>

Controlador

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.horas = [];
    for(var i=7;i<=22;i++){
      if(i<10){
        $scope.iconcatenado='0'+i;
        $scope.horas.push({hora:$scope.iconcatenado});
      }else{
        $scope.horas.push({hora:i});
      }
    }

    $scope.data = {};
    //9.1 hace referencia al data de CrearTutoria.html
    $scope.crearTutoria=function(){
        alert($scope.data.hih)//esto me muestra [Object:Object]
        alert(JSON.stringify($scope.data.hih))// me imprime hora:07 y lo que solo quiero obtener es 07 o el cualquier valor seleccionado
    }
}

solución

Tienes que cambiar la expresión de tu ng-options de esto

ng-options="hih.hora for hih in horas"

a esto

ng-options="hih.hora as hih.hora for hih in horas"

Esto puede ser un poco confuso de entender así que te lo explico por partes.

Estoy usando la sintáxis select as label for value in array en lugar de label for value in array porque de acuerdo a la documentación

Cuando una opción en el <select> es seleccionada, el elemento del arreglo o propiedad del objeto representado por la opción seleccionada será asignada al modelo identificado por la directiva ngModel.

La traducción de esto es que ng-options siempre te seleccionará el objeto indicado (tu tienes un arreglo de objetos) a menos que se le especifique lo contrario.

Ahí es cuando entra en juego la otra sintáxis. Las diferentes partes de select as label for value in array significan

  • select: Es la expresión que se evaluará y será asignada a ng-model cuando una opción sea seleccionada (equivalente al atributo value del elemento <option>, para este tipo de expresiones se asigna el índice del arreglo).
  • label: Es una expresión que será evaluada y mostrada en cada uno de los <option> cuando expandes el select (el contenido de texto dentro del elemento option)
  • value: Una variable que representa cada elemento de la colección
  • array: La colección en la que estás iterando

La expresión que te puse hih.hora as hih.hora for hih in horas significa en resumidas cuentas

Asigna la propiedad hora del objeto seleccionado dentro del arreglo en $scope.horas al ng-model y crea una lista de opciones a partir de este arreglo con el texto igual al valor de la propiedad hora

Me parece que de esta forma es más fácil entenderlo. Aquí te dejo un demo funcionando

_x000D_

_x000D_

var myApp = angular.module('myApp', []);_x000D_
_x000D_
//myApp.directive('myDirective', function() {});_x000D_
//myApp.factory('myService', function() {});_x000D_
_x000D_
function MyCtrl($scope) {_x000D_
  $scope.horas = [];_x000D_
  for (var i = 7; i <= 22; i++) {_x000D_
    if (i < 10) {_x000D_
      $scope.iconcatenado = '0' + i;_x000D_
      $scope.horas.push({_x000D_
        hora: $scope.iconcatenado_x000D_
      });_x000D_
    } else {_x000D_
      $scope.horas.push({_x000D_
        hora: i_x000D_
      });_x000D_
    }_x000D_
  }_x000D_
_x000D_
  $scope.data = {_x000D_
     // El valor inicial se cambia actualizando el valor de ngModel_x000D_
     hih: $scope.horas[0].hora_x000D_
  };_x000D_
  //9.1 hace referencia al data de CrearTutoria.html_x000D_
  $scope.crearTutoria = function() {_x000D_
    alert($scope.data.hih) //esto me muestra [Object:Object]_x000D_
    alert(JSON.stringify($scope.data.hih)) // me imprime hora:07 y lo que solo quiero obtener es 07 o el cualquier valor seleccionado_x000D_
  }_x000D_
}

_x000D_

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<div ng-app="myApp">_x000D_
  <div ng-controller="MyCtrl">_x000D_
    <div class="item item-divider item-positive item-text-wrap">_x000D_
      HORA INGRESO_x000D_
    </div>_x000D_
    <div class="row">_x000D_
      <div class="col .col-50">_x000D_
        <div class="item item-input item-select">_x000D_
          <div class="input-label">HH</div>_x000D_
          <select ng-model="data.hih" ng-options="hih.hora as hih.hora for hih in horas">_x000D_
          </select>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
    <a class="button button-block icon-left ion-ios-compose button-balanced" ng-click="crearTutoria()">_x000D_
          Crear Tutoría_x000D_
        </a>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *