AngularJS view-controller

これは私の最初の投稿ですので、誰もが "Hello World"です。私はangularJSモジュールに初心者スタイルの問題があり、それがどこにあるのか気づくことができません。誰かが私のコードスニペットを見て、データを表示するのがなぜ正しく動作しないのかアドバイスをくれますか？AngularJS view-controller

ありがとうございました！

<!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>

出典

2017-06-14 L.Pawel

体の最後にスクリプトを挿入してください。

出典

2017-06-14 21:09:59 PhoenixFireFlite

私はあなたのスクリプトタグを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>

出典

2017-06-14 21:45:46

あなたがイベントchnageにスコア（）関数を呼び出すか、クリックする必要が結合機能を持つ問題が

よう

<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

出典

2017-06-15 05:11:32

答えて

関連する問題