I want to get the result of a Select to use in JavaScript

Question

I want to get the result of a Select to use in JavaScript

Navigation

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

0

I want to get the option chosen by the person and simply print on the screen (it's just the basics, so I can do what I really want), I just do not know how to do it. The part of the HTML code that has {{value}} is where I want to appear what was selected in the choice box.Obs, I need this information to be able to use in JavaScript code and not in HTML, type of choice do something different in JS ... My code below:

HTML:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><scriptsrc="java.js"></script>
</head>
<body ng-app="pag" ng-controller = "botao">

    <div ng-repeat = "fig in figuras">
        <select>
            <option ng-model = "escolha" Ng-repeat = "x in name">{{x}}</option>
        </select>
        <caixa ng-repeat = "ponto in fig.pontos">
            <input type = "text" ng-model="ponto.x" size = "5">
        </caixa>    
    </div>
    <div>
        <button  ng-click="mais()" >Adicionar mais</button>

    </div>
    valor: {{ valor }}


</body>
</html>

JavaScript:

class Ponto {
contructor(x,y){
    this.x = x;
    this.y = y;
   }
}

class Figura {
    constructor(){
        this.pontos = [];
        this.pontos.push(new Ponto());
        this.pontos.push(new Ponto());
    }   
}

var pag = angular.module('pag', [])
pag.controller('botao',function($scope){
    $scope.name = ["Linha","circulo"]
    $scope.figuras=[]
    $scope.mais = function(){
        f1 = new Figura();
        $scope.figuras.push(f1);
    }
    $scope.pontos       
})

javascript html angularjs

asked by anonymous 03.01.2019 / 22:46

2 answers

Select using Enum Problems with routes in CodeIgniter

score 0 · Answer 1

The simplest way is to use the two way data binding , which would be two-way communication, ie the HTML changes the variable in JavaScript, and changes in the JavaScript variable also changes the HTML

In HTML, you need to start the application ( ng-app ), the controller ( ng-controller ), and add the ng-model attribute to the select tag (not option ). Attention, it is necessary to prefix the variables, both in ng-model and HTML interpolation ( {{ }} ) with the name of the control, which can be dubbed with as in your declaration

<html ng-app="app">
<head>
    <!-- Importa os scripts necessários -->
</head>
<body ng-controller="exemplo as ex">
    <select ng-model="ex.escolha">
        <option value="op1">Op 1</option>
        <option value="op2">Op 2</option>
        <option value="op3">Op 3</option>
    </select>
    <p>{{ex.escolha}}</p>
</body>

In Javascript just start the application, create a controller by passing a constructor function and set the variable

angular
    .module('app', [])
    .controller('exemplo', function() {
        this.escolha = "op2"; //Valor padrão
    });

This is just a simple example

score 0 · Answer 2

So I understand you have a list of figures and want to add values to this list from the options of a selectbox.

In this case, it would be best to use "ng-options" inside the "select" tag. Thus, the "ng-model" would change its value whenever the user chose an option, according to the code below:

HTML:

<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script></head><bodyng-controller="myController">
    <select ng-model="escolha" ng-options="item for item in opcoes">
        <option value="">Escolha uma opção</option>
    </select>

    <button ng-click="maisFiguras()">Adicionar</button>
    <p>{{ Opção do usuário: " + escolha }}</p>
    <p>{{ "Figuras: " + opcoes}}</p>

    <script>
        var app = angular.module("myApp", []);
        app.controller("myController", function($scope){
            $scope.opcoes = ["Linha","Circulo","Quadrado"];

            $scope.maisFiguras = function(){
                $scope.opcoes.push($scope.escolha);
            }
        });
    </script>
</body>
</html>