Show result with Angular JS

Question

Show result with Angular JS

Navigation

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

0

I work with AngularJS v1, the problem is that it does not show the result on the page, it just shows me {{resultado}} does not show me the value that contains that variable, I show the code.

<!DOCTYPE html>
<html lang="en" ng-app="operacion">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Angular y bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javasript" src="js/angular.min.js"></script>
</head>
<body>

    <div class="container text-center" ng-controller="preguntasController">
        <div class="jumbotron">
            <h1>Angular JS + Bootstrap</h1>
        </div>

        <div class="panel panel-default col-sm-6 col-sm-offset-3">
            <div class="panel-body">
                <p>¿Cuál es el resultado de la siguiente operación 6*9-12?</p>
                <button class="btn btn-primary" data-toggle="modal" data-target=".ventanaModal" ng-click="respuesta()" type="button">Calcular</button>
            </div>
        </div>

        <div class="modal fade ventanaModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <h1>{{resultado}}</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>



<script type="text/javascript">
    var miApp = angular.module('operacion', []);
    miApp.controller('preguntasController', function($scope){
        $scope.respuesta = function () {
            $scope.resultado = 6*9-12;
        }
    });
</script>

</body>
</html>

Error:

file path angular.min.js

angularjs angularjs-scope

asked by Pedro Ávila 17.09.2018 в 18:36

source

2 answers

Calculation of time differences in Java Error in modules

score 0 · Answer 1

Using CDNs works, there must be some error in the routes

var miApp = angular.module('operacion', []);
miApp.controller('preguntasController', function($scope) {
  $scope.respuesta = function() {
    $scope.resultado = 6 * 9 - 12;
  }
});

<!DOCTYPE html>
<html lang="en" ng-app="operacion">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Angular y bootstrap</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ=" crossorigin="anonymous"></script>


</head>

<body>

  <div class="container text-center" ng-controller="preguntasController">
    <div class="jumbotron">
      <h1>Angular JS + Bootstrap</h1>
    </div>

    <div class="panel panel-default col-sm-6 col-sm-offset-3">
      <div class="panel-body">
        <p>¿Cuál es el resultado de la siguiente operación 6*9-12?</p>
        <button class="btn btn-primary" data-toggle="modal" data-target=".ventanaModal" ng-click="respuesta()" type="button">Calcular</button>
      </div>
    </div>

    <div class="modal fade ventanaModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            <h1>{{resultado}}</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

score 0 · Answer 2

I already saw the error thanks to everyone for their time. Error

<script type="text/javasript" src="js/angular.min.js"></script>

Correction

<script type="text/javascript" src="js/angular.min.js"></script>

A "c" was missing

Greetings!