Question

这是我的第一篇文章，所以每个人的“Hello World”:)。我的angularJS模块有一个新手式问题，无法注意到它在哪里。任何人都可以查看我的代码片段，并告诉我为什么显示数据无法正常工作？

谢谢你的帮助！

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
var one = angular.module('realSimpleCalc', []);
one.controller('calcContr', function ($scope) {
    $scope.score = function () {
        if ($scope.condition == '+') {
            return ($scope.firstDigit + $scope.secondDigit);
        }
        else if ($scope.condition == "-") {
            return (+$scope.firstDigit - +$scope.secondDigit);
        }
            else if ($scope.condition == '*') {
                return $scope.firstDigit * $scope.secondDigit;
            }
            else if ($scope.condition == '/') {
                return ($scope.firstDigit / $scope.secondDigit);
            }
        else if ($scope.condition == '%') {
                return $scope.firstDigit % $scope.secondDigit;
            }
        };
    });
</script>
<body>

<div ng-app = "realSimpleCalc" ng-controller = "calcContr">
    <input type = "number" ng-model = "firstDigit" required/>
    <select ng-model = "condition">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
        <option>%</option>
    </select>

    <input type = "number" ng-model = "secondDigit"/>
    <label>=</label>
    <input type = "text" ng-bind = "score"/>

</div >

</body>
</html>

Answer 1

你应该尝试将脚本放在正文的末尾。

Answer 2

我将您的脚本标记分成两个独立的脚本标记，似乎可以解决您的问题。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var one = angular.module('realSimpleCalc', []);
    one.controller('calcContr', function ($scope) {
        $scope.text = "test text";
        $scope.score = function () {
            if ($scope.condition == '+') {
                return ($scope.firstDigit + $scope.secondDigit);
            }
            else if ($scope.condition == "-") {
                return (+$scope.firstDigit - +$scope.secondDigit);
            }
                else if ($scope.condition == '*') {
                    return $scope.firstDigit * $scope.secondDigit;
                }
                else if ($scope.condition == '/') {
                    return ($scope.firstDigit / $scope.secondDigit);
                }
            else if ($scope.condition == '%') {
                    return $scope.firstDigit % $scope.secondDigit;
                }
            };
        });   
</script>
</head>
<body>
<div ng-app="realSimpleCalc" ng-controller="calcContr">
<input type="number" ng-model="firstDigit" required/>
<select ng-model="condition">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
    <option>%</option>
</select>

<input type = "number" ng-model = "secondDigit"/>
<label>=</label>
<input type = "text" ng-bind = "score"/>
<p>{{text}}</p>
</div >

</body>
</html>

Answer 3

绑定您必须在chnage或click事件上调用score（）函数的函数

喜欢

<input type = "number" ng-model = "firstDigit" required/>
    <select ng-model = "condition">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
        <option>%</option>
    </select>

    <input type = "number" ng-model ="secondDigit"/>
    <a ng-click=score()>=/a>
    {{total}}

请查看工作plunkr

AngularJS视图控制器

3 个答案: