將兩個值相乘

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

我的輸出

來源

2016-12-18 Lutaaya Huzaifah Idris

您需要定義角模塊名稱Demo，因爲你已經有Demo指定ng-app模塊名稱。在目前的情況下，由於沒有使用名稱Demo來定義模塊，因此它失敗。請參閱angular.js參考後的頁面上的app.js文件。

app.js

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

標記

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

Demo Plunkr

雖然簡單的辦法解決你的問題將只是除去data-ng-app="Demo"從您的html代碼。但是，如果不定義module而運行角度應用程序將不是一個好習慣。這就是爲什麼我有答案的第一部分。這段不是我推薦做的。

來源

2016-12-18 13:26:52

因此，創建另一個名爲app.js的腳本，我把insode放在腳本文件夾中？ @Pankaj –

@LutaayaHuzaifahIdris雖然它可以通過從應用程序中刪除'data-ng-app =「Demo」'工作，但最佳做法是創建一個模塊並將組件附加到它..這將幫助你..謝謝:) –

它仍然拒絕，檢查我已經發布了我的輸出@Pankaj –

將兩個值相乘

回答

相關問題