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

Получить значение вместо объекта в SELECT в Angularjs

  • 772

У меня есть следующий код, который показывает мне серию часов с 07 до 22. Я хочу знать, как получить значение выбранного часа в моем контроллере и можно ли распечатать его в предупреждении.

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>

Контроллер

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

    Вы должны изменить свое выражение ng-optionsэтого

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

    к этому

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

    Это может быть немного запутанным для понимания, поэтому я сломаю это для вас.

    Я использую синтаксис select as label for value in arrayвместо label for value in arrayпотому что согласно документации

    Когда <select>выбран параметр in, элемент массива или свойство объекта, представленное выбранным параметром, будет назначено модели, определенной директивой ngModel.

    Перевод этого заключается в том, что он ng-options всегда будет выбирать указанный объект (у вас есть массив объектов ), если не указано иное.

    Вот когда в игру вступает другой синтаксис. Различные части select as label for value in arrayсреднего

    • select: это выражение, которое будет оцениваться и назначаться ng-модели при выборе параметра (эквивалентно атрибуту valueэлемента <option>, для этого типа выражения назначается индекс массива).
    • label: это выражение, которое будет оцениваться и отображаться в каждом из элементов <option>при развертывании select(текстовое содержимое внутри элемента option) .
    • value: переменная, представляющая каждый элемент коллекции.
    • array: коллекция, которую вы повторяете

    Выражение, которое я вам дал, hih.hora as hih.hora for hih in horasозначает вкратце

    Присвоить свойство horaвыбранного объекта внутри массива в $scope.hours ng-модели и создать список опций из этого массива с текстом, равным значению свойстваhora

    Думаю, так проще понять. Здесь я оставляю вам рабочую демонстрацию

    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