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

在Angularjs的SELECT中获取一个值而不是一个对象

  • 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因为根据文档

    当一个选项 in<select>被选中时，由所选选项表示的数组元素或对象属性将被分配给由 ngModel 指令标识的模型。

    除非另有说明，否则它将ng-options 始终选择指示的对象（您有一个对象数组）。

    这就是其他语法发挥作用的时候。select as label for value in array均值的不同部分

    • 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<option>：这是一个表达式，当您展开select（元素内的文本内容option）时，将在每个中评估和显示
    • value：代表集合中每个元素的变量
    • array：您正在迭代的集合

    我给你的表情hih.hora as hih.hora for hih in horas简而言之

    将 $scope.hours 中数组中选定对象的属性分配hora给 ng-model，并从此数组中创建一个选项列表，其中的文本等于属性的值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