在AngularJS中編寫添加函數

我是AngularJS的新手，我正在做一些教程來聯繫它。雖然我正在做這些教程，但我已經修改了一些代碼，以便更好地理解背後的內容。我的代碼由兩部分組成，這兩部分無關。在AngularJS中編寫添加函數

第一個是簡單的用戶輸入，並基於該列表進行過濾。這工作正常。

但是，在第二部分中，我試圖實現一個簡單的添加功能，用戶可以輸入一個信息並根據這兩個數字的總和計算出來。這部分根本不起作用。這些數字被認爲是字符串。代碼基本上來自這個來源here。當我複製整個代碼並運行它時，它工作正常，但是當我修改它時，它沒有。

我想了解爲什麼我的代碼無法正常工作。對我來說幾乎沒有區別。所以我認爲我最終誤解了angularjs的概念。但我無法弄清楚錯誤的可能性。

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<script type="text/javascript"> 
 
    function TodoCtrl($scope) { 
 
     $scope.total = function() { 
 
      return $scope.x + $scope.y; 
 
     }; 
 
    } 
 
</script> 
 
</head> 
 
<body data-ng-app> 
 
    <input type="text" ng-model="name">{{name}} 
 
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']"> 
 
     <ul> 
 
      <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li> 
 
     </ul> 
 
    </div> 
 

 
    <div data-ng-controller="TodoCtrl"> 
 
     <form> 
 
     <input type="text" ng-model ="x">{{x}} 
 
     <input type="text" ng-model ="y"> {{y}} 
 
     <input type="text" value="{{total()}}"/> 
 
     <p type= "text" value="{{total()}}">value</p> 
 
     </form> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-09-16 Pluxyy

您使用鏈接的文章中的代碼'angularjs 1.0.5'，在*** *** 2013。這句法還沒有被'angularjs 1.2'有效的，在2015年 – Claies

@Pluxyy添加了答案:) – Sajeetharan

幾件事情需要改變......

首先，你需要創建一個模塊：

var app = angular.module("myApp", []);

然後，你需要定義一個模塊，例如myApp關於ng-app指令。

<body data-ng-app="myApp">

然後你需要添加TodoCtrl到模塊：

app.controller("TodoCtrl", TodoCtrl);

同時檢查兩個$scope.x和$scope.y具有價值，並確保它們都作爲整數分析，否則你將得到的字符串連接("1"+"1"="11")而不是加法(1+1=2)！

$scope.total = function() { 
    return ($scope.x && $scope.y) 
    ? parseInt($scope.x) + parseInt($scope.y) 
    : 0; 
    };

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<script type="text/javascript"> 
 
(function(){ 
 

 
    var app = angular.module("myApp", []); 
 

 
    app.controller("TodoCtrl", TodoCtrl); 
 

 
    function TodoCtrl($scope) { 
 
     $scope.total = function() { 
 
      return ($scope.x && $scope.y) 
 
       ? parseInt($scope.x) + parseInt($scope.y) 
 
       : 0; 
 
     }; 
 
    } 
 
}()); 
 
</script> 
 
</head> 
 
<body data-ng-app="myApp"> 
 
    <input type="text" ng-model="name">{{name}} 
 
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']"> 
 
     <ul> 
 
      <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li> 
 
     </ul> 
 
    </div> 
 

 
    <div data-ng-controller="TodoCtrl"> 
 
     <form> 
 
     <input type="text" ng-model ="x">{{x}} 
 
     <input type="text" ng-model ="y"> {{y}} 
 
     <input type="text" value="{{total()}}"/> 
 
     <p type= "text" value="{{total()}}">value</p> 
 
     </form> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-09-16 15:22:24

您需要定義TodoCtrl作爲控制器，而不是功能

.controller("TodoCtrl",function($scope){ 
      $scope.x = 0; 
      $scope.y = 0; 
      $scope.total = function() { 
       return parseInt($scope.x) + parseInt($scope.y) 
      }; 
})

演示

angular.module("app",[]) 
 
.controller("TodoCtrl",function($scope){ 
 
     $scope.x = 0; 
 
     $scope.y = 0; 
 
     $scope.total = function() { 
 
      return parseInt($scope.x) + parseInt($scope.y) 
 
     }; 
 
     
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" > 
 
    <input type="text" ng-model="name">{{name}} 
 
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']"> 
 
     <ul> 
 
      <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li> 
 
     </ul> 
 
    </div> 
 

 
    <div data-ng-controller="TodoCtrl"> 
 
     <form> 
 
     <input type="text" ng-model ="x">{{x}} 
 
     <input type="text" ng-model ="y"> {{y}} 
 
     <input type="text" value="{{total()}}"/> 
 
     <p type= "text" value="{{total()}}">value</p> 
 
     </form> 
 
    </div> 
 
</div>

來源

2017-09-16 15:18:28

感謝的原因，這個幫助，但如何從源頭[https://stackoverflow.com/做的代碼問題/ 15648711/angular-js-adding-two-numbers-issue]爲我工作，即使我沒有將「TodoCtrl」定義爲控制器？ – Pluxyy

它甚至沒有定義'angular.module'。如果你使用角度，你需要遵循框架提供的協議。這是定義模塊的正確方法 –

如在上述兩個答案加入TodoCtrl作爲控制器，而不是函數將使片斷工作提及。上述1.3

REASON:

Angularjs框架不支持全局函數，這意味着declaring controller的功能不會工作。

在您的代碼段，使用的是角版本1.5，這需要被定義的控制器。

DEMO

angular.module("app",[]) 
 
.controller("TodoCtrl",function($scope){ 
 
     $scope.x = 0; 
 
     $scope.y = 0; 
 
     $scope.total = function() { 
 
      return parseInt($scope.x) + parseInt($scope.y) 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" > 
 
    <input type="text" ng-model="name">{{name}} 
 
    <div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']"> 
 
     <ul> 
 
      <li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li> 
 
     </ul> 
 
    </div> 
 
    <div data-ng-controller="TodoCtrl"> 
 
     <form> 
 
     <input type="text" ng-model ="x">{{x}} 
 
     <input type="text" ng-model ="y"> {{y}} 
 
     <input type="text" value="{{total()}}"/> 
 
     <p type= "text" value="{{total()}}">value</p> 
 
     </form> 
 
    </div> 
 
</div>

來源

2017-09-16 15:37:34 Sajeetharan

在AngularJS中編寫添加函數

回答

相關問題