AngularJS視圖控制器

這是我的第一篇文章，因此「Hello World」適合所有人:)。我的angularJS模塊有一個新手風格的問題，不能注意到它在哪裏。任何人都可以看看我的代碼片段，並給我一個建議，爲什麼顯示數據無法正常工作？AngularJS視圖控制器

謝謝4幫助！

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

我把你的腳本標籤分成兩個獨立的腳本標籤，它似乎可以解決你的問題。

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

AngularJS視圖控制器

回答

相關問題