I want to Take the Result of a Select to use in Javascript

Asked

Viewed 143 times

0

I’m wanting to take the option chosen by the person and simply print on the screen (it’s just the basics, to then do what I really want), so I don’t know how to do it. The part of the HTML code that has {{ value }} is where I want the q to appear was selected in the box of choice.Note, I need this information to be able to use in Javascript code and not in HTML, for later power for each type of choice to do something different in JS... My code to follow:

HTML:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="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

2 answers

0

The simplest way is to use the two way data Binding, which would be two-way communication, i.e., HTML changes the variable in Javascript, and changes in the Javascript variable also changes HTML

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

<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

  • but wouldn’t that just take op1 1?How would I pick up the result that person chose? would this.choice = "ex.choice" ?

  • The result would be in the variable escolha of the controller exemplo, which, in html can be accessed by exemplo.escolha or, using an alias ex.escolha, edited the question, see if it became clearer

0

From what 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" within the "select" tag. Thus, the "ng-model" would change 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>
<body ng-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>

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.