如何从带有angularjs和ionic1的select中获取信息?

时间:2017-06-07 22:19:22

标签: angularjs json ionic-framework angularjs-ng-model

如何从带有angularjs和ionic1的选择中获取信息?

我正在尝试从JSON获取信息并放入“选择”,直到我完成该部分。但是当我从这个“选择”中选择信息并尝试获取“选择”中的ID和名称时,它没有显示。

我的HTML - > igreja.html

<ion-view view-title="Igrejas">
    <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
    </ion-nav-buttons>
    <ion-content>
     <form ng-submit="realizarLogin()">
      <div class="list list-inset">
        <ion-item class="item-input item-select--full">
          <div class="input-label">
            Selecione a sua igreja
          </div>
          <select ng-model="login" ng-options="y.Nome for (x,y) in igrejaEscolhida">
          </select>
          <h1> test: {{login.Nome}}</h1>
          <h1> id: {{login.Id}} </h1>
        </ion-item> 

        <button class="button button-block button-positive" type="submit">Entrar</button>
      </div>
    </form>
    </ion-content>
</ion-view>

我的routes.js

.state('app.igrejas', {
    url: '/igrejas',
    views: {
      'menuContent': {
        templateUrl: 'templates/igrejas.html',
        controller: 'igrejasController'
      }
    }
  })

我的controller.js

.controller('igrejasController', function($scope, $ionicModal, $timeout, $stateParams, $ionicPopup, $state, $rootScope, $http, $sce) {



  $http.get(linkIgrejas).then(function(data){

    $scope.igrejaEscolhida = data.data;

    console.log($scope.igrejaEscolhida);

    $scope.igrejaEscolhida.forEach(function(element, index, array){
      element.Id = element.Id;
      element.Nome = element.Nome;
      console.log(element.Id);
      console.log(element.Nome);
    })

  })

  $rootScope.login = {};

  $scope.realizarLogin = function() {


    var dadosDoLogin = {
      params : {
        nome: $rootScope.login.nome
      }
    }

    $scope.selectUpdated = function(optionSelected) {

      console.log('Updated');
      console.log(optionSelected);

    };

    console.log($scope.selectUpdated);

    $scope.loginF.Nome;
    $scope.loginF.Id;

    console.log($scope.loginF.Nome);
    console.log($scope.loginF.Id);


     $rootScope.teste = $rootScope.login.nome;
     $scope.nomeIgreja = $rootScope.login.nome;
     $scope.idIgreja = $rootScope.login.Id;

     $rootScope.login.Id;

      console.log($scope.nomeIgreja);
      console.log($scope.idIgreja);



  };
})

有人可以帮助我,或者在“选择”中向我展示我做错了吗?

2 个答案:

答案 0 :(得分:0)

我改变了我的Igrejas.html和controller.js

Igrejas.html

<ion-view view-title="Igrejas">
    <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
    </ion-nav-buttons>
    <ion-content>
     <form ng-submit="realizarLogin()">
      <div class="list list-inset">
        <ion-item class="item-input item-select--full">
          <div class="input-label">
            Selecione a sua igreja
          </div>
          <select ng-model="login.nome">
                  <option ng-repeat="igrejaEscolhidas in igrejaEscolhida">
                   {{ igrejaEscolhidas.Nome }}
                   {{ igrejaEscolhidas.Id }}
                  </option>
          </select>
        </ion-item> 

        <button class="button button-block button-positive" type="submit">Entrar</button>
      </div>
    </form>
    </ion-content>
</ion-view>

我的controller.js

.controller('igrejasController', function($scope, $ionicModal, $timeout, $stateParams, $ionicPopup, $state, $rootScope, $http, $sce) {



  $http.get(linkIgrejas).then(function(data){

    $scope.igrejaEscolhida = data.data;

    console.log($scope.igrejaEscolhida);

    $scope.igrejaEscolhida.forEach(function(element, index, array){
      element.Id = element.Id;
      element.Nome = element.Nome;
      console.log(element.Id);
      console.log(element.Nome);
    })

  })

  $rootScope.login = {};

  $scope.realizarLogin = function() {


     $rootScope.teste = $rootScope.login.nome;

    console.log($rootScope.teste);




  };
})

当我以这种方式测试时,我设法获得了id和名称,但是在这个印刷品中他们是这样的,我需要将它们分开,他们如何将它们分开在angularjs中?

我的打印:

http://prntscr.com/fhg4py

或者有人知道我如何获取id和单独的名称,因为我有这个id并且该名称将来自同一个选择?我把它们放在一起了。

答案 1 :(得分:0)

尝试将值本身表示为id

<option ng-repeat="igrejaEscolhidas in igrejaEscolhida" value="{{ igrejaEscolhidas.Id }}">
                   {{ igrejaEscolhidas.Nome  }}
                  </option>

然后带有select的ng-model将从所选选项的值中获取Id。