Question

我是AngularJS的新手，我正在做一些教程以便与之取得联系。在我做这些教程的过程中，我对代码进行了一些修改，以便更好地了解后面的内容。我的代码由两部分组成，彼此无关。

第一个是简单的用户输入，并根据该列表进行过滤。这很好。

然而，在第二部分中，我试图实现一个简单的添加功能，用户可以在此处输入输入并基于此计算两个数字的总和。这部分根本不起作用。这些数字被识别为字符串。代码基本上来自此源here。当我复制整个代码并运行它时，它工作正常，但是当我稍微修改它时它不会。

我想了解为什么我的代码不起作用。对我来说几乎没有区别。所以我认为我最终误解了angularjs的概念。但我无法弄清楚错误的位置。

＆＃13;

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

＆＃13;

Answer 1

要改变一些事情......

首先，您需要创建一个模块：

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>

Answer 2

如上面两个答案所述，添加 TodoCtrl 作为控制器代替功能会使代码段工作。

<强> REASON:

1.3 上面的Angularjs框架不支持全局函数，这意味着declaring controller函数不起作用。

在您的代码段中，您使用的是角度版本1.5，需要定义控制器。

<强> DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要将TodoCtrl定义为控制器而不是函数

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

在AngularJS中编写添加函数

3 个答案: