乘以两个值

时间:2016-12-18 13:21:17

标签: angularjs

我是AngularJS的初学者,但我完全感到困惑,我想在文本框中将两个值相乘得到最终答案,但这段代码并没有倍增它们。 请让我知道我做错了什么。 以下是代码。

<!DOCTYPE html>

<head>
    <title> PixsarApp Content Management System</title>
 <script src= "~/Scripts/angular.js"></script>
</head>
<body data-ng-app="Demo" >


     <h1>PixsarApp Content Management System</h1>



    Enter Numbers to Multiply: 
    <input type="text" data-ng-model="Num1" /> x <input type="text" data-ng-model="Num2" /> = <span>{{Num1*Num2}}</span>


</body>
</html>

使用的是Visual Studio 2012。

enter image description here

我的输出

enter image description here

1 个答案:

答案 0 :(得分:0)

您需要定义名为127.0.0.1:8088的角度模块,因为您已经使用Demo模块名称指定了ng-app。在当前情况下,它失败了,因为没有使用名称Demo定义的模块。在Demo引用后,请参阅页面上的app.js文件。

<强> app.js

angular.js

<强>标记

angular.module('Demo', [])
.controller('mainController', function($scope){
   $scope.Num1 = 0
   $scope.Num2 = 0
});

Demo Plunkr

虽然您的问题的简单解决方法就是从您的HTML代码中删除<head> <title> PixsarApp Content Management System</title> <script src= "~/Scripts/angular.js"></script> <script src= "~/Scripts/app.js"></script> </head> <body data-ng-app="Demo" ng-controller="mainController"> <h1>PixsarApp Content Management System</h1> Enter Numbers to Multiply: <input type="number" data-ng-model="Num1" /> x <input type="number" data-ng-model="Num2" /> = <span>{{Num1*Num2}}</span> </body> 。但是在没有定义data-ng-app="Demo"的情况下运行角度应用程序不是一个好习惯。这就是为什么我有第一部分答案。这段话不是我建议做的。