Listing information with select

Question

Listing information with select

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have already opened a question of this here and a user of the site helped me, and healed my doubts. However, when I try to use the code again that he introduced me, he is presenting errors. He introduced me the code with States, and I modified it to Neighborhoods (clean code as the information will still be placed.)

The code is as follows:

<script>
(function() {
  'use strict';

  angular
.module('appBairros', []);

  angular
.module('appBairros')
.controller('BairroController', BairroController);

  BairroController.$inject = [];

  function BairroController() {
var bairro = this;
bairro.opcoes = [];

iniciar();

function iniciar() {
  bairro.opcoes = [];
  bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
  bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

  bairro.seleciona = bairro.opcoes[0];
}
  }
    })();

<div ng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairo.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

It should read:

AndwhenIrunmycode,itlookslikethis:

javascript angularjs

asked by anonymous 07.03.2017 / 14:23

2 answers

Identifying path of the file with pathinfo Application developed in Delphi XE8 closes in execution [closed]

score 1 · Answer 1

Two small typos.

In controller , where it reads bairro.seleciona = bairro.opcoes[0]; you should read bairro.selecionado = bairro.opcoes[0];
In view , where you read ng-model="bairo.selecionado" you should read ng-model="bairro.selecionado"

With these two fixes the code works, as you can see in the version below:

angular.module('appBairros', []);

angular.module('appBairros').controller('BairroController', BairroController);

BairroController.$inject = [];

function BairroController() {
var bairro = this;
bairro.opcoes = [];

iniciar();

function iniciar() {
bairro.opcoes = [];
bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

bairro.selecionado = bairro.opcoes[0];
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

score 1 · Answer 2

Your error is within function iniciar() in bairro.seleciona = bairro.opcoes[0]; must be bairro.selecionado = bairro.opcoes[0]; and also change ng-model="bairo.selecionado" to ng-model="bairro.selecionado" being bairro and not bairo

(function() {
  'use strict';

  angular
  .module('appBairros', []);

    angular
  .module('appBairros')
  .controller('BairroController', BairroController);

  BairroController.$inject = [];

  function BairroController() {
    var bairro = this;
    bairro.opcoes = [];

    iniciar();

    function iniciar() {
      bairro.opcoes = [];
      bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
      bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

      bairro.seleciona = bairro.opcoes[0];
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script><divng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}