0

Já abri uma questão dessa aqui e um usuário do site me ajudou, e sanou minhas dúvidas. Porém, ao tentar utilizar o código novamente que ele me apresentou, o mesmo esta apresentando erros. Ele me apresentou o código com Estados, e eu modifiquei para Bairros (código limpo pois as informações serão colocadas ainda.)

O código é o seguinte:

<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}}

Ele deveria apresentar assim: inserir a descrição da imagem aqui

E quando eu executo o meu código, ele apresenta dessa forma:

inserir a descrição da imagem aqui

2 Respostas 2

1

Dois pequenos erros de digitação.

  • No controller, onde se lê bairro.seleciona = bairro.opcoes[0]; deve-se ler bairro.selecionado = bairro.opcoes[0];
  • Na view, onde se lê ng-model="bairo.selecionado" deve-se ler ng-model="bairro.selecionado"

Com estas duas correções o código funciona, como se pode ver na versão abaixo:

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>
<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="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

8
  • Corrigi os erros observados e ainda sim quando executo não aparece as opções Commented 7/03/2017 às 18:09
  • @InezBoldrin o código funciona quando você clica no botão Executar acima?
    – OnoSendai
    Commented 7/03/2017 às 18:37
  • Funciona sim. Funciona do jeito que deveria funcionar pra mim também. Inclusive já peguei o código que está corrigido e substitui pelo que está no meu arquivo e continua sem apresentar as opções. Commented 7/03/2017 às 18:57
  • @InezBoldrin então seu erro pode estar sendo causado por algum outro aspecto da sua aplicação. O console mostra algum erro?
    – OnoSendai
    Commented 7/03/2017 às 18:58
  • 1
    A URL que você está utilizando no seu código inclui o caracter &zwnj; (zero-width non-joiner). Substitua a linha original toda pelo que enviei.
    – OnoSendai
    Commented 7/03/2017 às 19:37
1

seu erro esta dentro da function iniciar() em bairro.seleciona = bairro.opcoes[0]; deve ser bairro.selecionado = bairro.opcoes[0]; e tambem alterar ng-model="bairo.selecionado" para ng-model="bairro.selecionado" sendo bairro e não 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>

<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="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

2
  • Fiz essa correção e ainda não alterou na execução. Continua executando sem apresentar as opções. Commented 7/03/2017 às 14:30
  • confere sua digitacao, na sua model, voce esta usando bairo com 1 R .. e deveria usar bairro com 2 R
    – andrepaulo
    Commented 7/03/2017 às 15:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .