Home / Questions / 11409
Accepted
Dimoreno
Asked: 2020-05-31 15:22:45 +0800 CST 2020-05-31 15:22:45 +0800 CST

Get a value instead of an object in a SELECT in Angularjs

  • 772

I have the following code that shows me a series of hours from 07 to 22. What I want to know is how to obtain the value of the selected hour in my controller and if it is possible to print it in an alert.

HTML view

<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>

Controller

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
    }
}
angularjs

1 Answers

  1. Best Answer

    You have to change your expression ng-optionsof this

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

    to this

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

    This can be a bit confusing to understand so I'll break it down for you.

    I am using the syntax select as label for value in arrayinstead of label for value in arraybecause according to the documentation

    When an option in <select>is selected, the array element or object property represented by the selected option will be assigned to the model identified by the ngModel directive.

    The translation of this is that it will ng-options always select the indicated object (you have an array of objects ) unless otherwise specified.

    That's when the other syntax comes into play. The different parts of select as label for value in arraymean

    • select: It is the expression that will be evaluated and assigned to ng-model when an option is selected (equivalent to valuethe element attribute <option>, for this type of expression the array index is assigned).
    • label: It is an expression that will be evaluated and displayed in each of the <option>when you expand the select(the text content inside the element option)
    • value: A variable that represents each element of the collection
    • array: The collection you are iterating over

    The expression that I gave you hih.hora as hih.hora for hih in horasmeans in short

    Assign the property horaof the selected object inside the array in $scope.hours to the ng-model and create a list of options from this array with the text equal to the value of the propertyhora

    I think it's easier to understand this way. Here is a working demo

    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 = {
     // El valor inicial se cambia actualizando el valor de ngModel
     hih: $scope.horas[0].hora
  };
  //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
  }
}
    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <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-options="hih.hora as 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>
</div>

    • 2