Question

在AngularJs教程中我构建了一个简单的计算器但是当我点击计算按钮时它没有显示输出。我不知道我在做错误的地方。 HTML文件有三个文本输入字段和五个按钮。当我点击计算按钮时，输出不会出现

我的HTML文件代码

    <!DOCTYPE html>
<html data-ng-app="calc">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
<body>
    <div align="center" data-ng-controller="CalcCtrl as c1">
            <input type="text" data-ng-model="c1.num1"></input>
            <span data-ng-bind="c1.selectedOperation"></span>
            <input type="text" data-ng-model="c1.num2"></input>
            <span></span>
            <input type="text">{{c1.result}}</input>
        <p>
             <button data-ng-click="c1.buttonClicked('+')">+</button>
            <button data-ng-click="c1.buttonClicked('-')">-</button>
             <button data-ng-click="c1.buttonClicked('*')">*</button>
             <button data-ng-click="c1.buttonClicked('/')">/</button>
        </p>
        <p>
            <button data-ng-click="c1.calcResult()">calculate</button>
        </p>
        {{c1.num1}} {{c1.num2}}
    </div>
    </body>

</html>

我的App.JS文件

var app = angular.module("calc", []);
app.controller('CalcCtrl', calc);

function calc() {
    this.result = 0;
    this.buttonClicked = function(button){
        this.selectedOperation=button;
    }
    this.calcResult=function(){
        var1 n1=parseFloat(this.num1);
        var2 n2=parseFloat(this.num2);

        if(this.selectedOperation==='+') {
            this.result = n1+n2;
        }else if(this.selectedOperation==='-') {
            this.result = n1-n2;
        }else if(this.selectedOperation==='*') {
            this.result = n1*n2;
        }else if(this.selectedOperation==='\') {
                 this.result = n1/n2;
        }

    }

}

Answer 1

else if(this.selectedOperation==='\')必须为else if(this.selectedOperation==='/')。你正在逃避第二个引号。

Answer 2

首先，输入标记是独立标记，内部没有值。尝试使用data-ng-model或将值设置为span。

<input type="text" data-ng-model="c1.result" />

或

<span>{{c1.result}}</span>

如果报告有任何错误，请查看浏览器控制台。

Answer 3

我不知道我在您的代码中做了哪些更改，因为我更改了更多代码并添加了一些功能。你可以复制粘贴下面的代码片段。

工作代码段

angular.module("calc",[]).controller('CalcCtrl', function($scope) {
    $scope.result = 0;
    $scope.buttonClicked = function(button){
        this.selectedOperation=button;
    };
    $scope.calcResult = function(){
        var n1 = parseFloat($scope.num1);
        var n2 = parseFloat($scope.num2);
        if($scope.selectedOperation==='+') {
            $scope.result = n1+n2;
        }else if($scope.selectedOperation==='-') {
            $scope.result = n1-n2;
        }else if($scope.selectedOperation==='*') {
            $scope.result = n1*n2;
        }else if($scope.selectedOperation==='/') {
                 $scope.result = n1/n2;
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="calc" align="center" ng-controller="CalcCtrl">
            <input type="text" ng-change="calcResult()" ng-model="num1"></input>
            <span ng-bind="selectedOperation"></span>
            <input type="text" ng-change="calcResult()" ng-model="num2"></input>
            <span></span>
            <input type="text" ng-model="result"></input>
        <p>
             <button ng-click="buttonClicked('+');calcResult()">+</button>
            <button ng-click="buttonClicked('-');calcResult()">-</button>
             <button ng-click="buttonClicked('*');calcResult()">*</button>
             <button ng-click="buttonClicked('/');calcResult()">/</button>
        </p>
        <p>
            <button ng-click="calcResult()">calculate</button>
        </p>
        {{num1}}{{selectedOperation}} {{num2}} = {{result}}
    </div>

使用AngularJS构建的计算器不显示结果

3 个答案:

工作代码段