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

Question

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

Navigation

#1 by (2 votes)

1

I have the following code that shows me a series of hours from 07 to 22. What I want to know is how to get the value of the time selected in my controller and if it is possible to print on an 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>

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

asked by Dimoreno 31.05.2016 в 01:22

source

1 answer

Threading of threads in Java Offset in slider with Javascript

score 2 · Accepted Answer

You have to change the expression of your ng-options of 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 explain it to you in parts.

I am using the syntax select as label for value in array instead of label for value in array because according to the documentation

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

The translation of this is that ng-options always will 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 array mean

select : Is the expression that will be evaluated and will be assigned to ng-model when an option is selected (equivalent to the attribute value of the element <option> , for this type of expressions the index of the fix 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 within the element option )
value : A variable that represents each element of the collection
array : The collection in which you are iterating

The expression that I put you hih.hora as hih.hora for hih in horas means in summary accounts

Assign the hora property of the selected object within 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 property hora

It seems to me that this is easier to understand. Here you have a demo working

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>